/* ==========================================================================
   Niologic Design System — Colors & Type
   Source: Corporate Style Sheet "Farbkarte niologic"
   ========================================================================== */

/* Webfonts — selbst gehostet (DSGVO: gleiche Domain, KEIN Google-Fonts-CDN).
   Dateien: assets/fonts/  ·  @font-face-Regeln: assets/fonts.css
   - Inter for headlines (h1–h4, display)
   - Source Sans 3 for UI + short body text
   - Source Serif 4 for long-form reading (article body, prose blocks)
   - JetBrains Mono for code */
@import url('assets/fonts.css');

:root {
  /* ----- Brand palette (from Farbkarte) ----- */
  --nio-navy:        #004064;  /* PRIMARY — navy blue, depth, reliability */
  --nio-teal:        #00ABC5;  /* PRIMARY — teal, modern, innovation */
  --nio-teal-deep:   #0095B1;  /* hover / pressed state for teal */
  --nio-teal-bright: #4EC5D7;  /* highlight, charts */
  --nio-teal-pale:   #81D5E2;  /* surfaces, chart support */
  --nio-cyan-mist:   #D4EFFC;  /* tinted backgrounds (from logo gradient) */
  --nio-lime:        #8CC63F;  /* accent — energy, growth (logo ribbon) */
  --nio-lime-soft:   #BADD8C;  /* lime tint */

  --nio-ink:         #2E3338;  /* primary text */
  --nio-grey:        #5C666F;  /* wordmark grey, body secondary */
  --nio-grey-mid:    #7F878E;  /* tertiary text, captions */
  --nio-grey-soft:   #C8CDD2;  /* hairlines, dividers */
  --nio-grey-bg:     #F2F4F6;  /* surface tint */
  --nio-white:       #FFFFFF;

  /* ----- Semantic foreground ----- */
  --fg-1: var(--nio-ink);      /* headings, primary copy */
  --fg-2: var(--nio-grey);     /* body, secondary copy */
  --fg-3: var(--nio-grey-mid); /* meta, captions */
  --fg-on-dark:    #FFFFFF;
  --fg-on-teal:    #FFFFFF;
  --fg-link:       var(--nio-teal-deep);
  --fg-link-hover: var(--nio-navy);

  /* ----- Semantic background / surface ----- */
  --bg-page:    #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-tint:    var(--nio-grey-bg);
  --bg-tint-cool: var(--nio-cyan-mist);
  --bg-deep:    var(--nio-navy);
  --bg-accent:  var(--nio-teal);

  /* ----- Status (derived, non-canonical) ----- */
  --status-success: #4CAF7A;
  --status-warning: #E2A33C;
  --status-error:   #D14848;
  --status-info:    var(--nio-teal);

  /* ----- Borders ----- */
  --border-1: #E4E7EA;        /* default hairline */
  --border-2: var(--nio-grey-soft);
  --border-strong: var(--nio-ink);
  --border-focus: var(--nio-teal);

  /* ----- Type families ----- */
  --font-sans:    "Source Sans 3", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: "Inter", "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ----- Type scale (modular ~1.2 / display jumps to ~1.33) ----- */
  --fs-display-xl: 72px;
  --fs-display:    56px;
  --fs-h1:         40px;
  --fs-h2:         30px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body:       15px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-overline:   12px;

  /* ----- Weights ----- */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* ----- Line heights ----- */
  --lh-tight:  1.1;  /* @kind font */
  --lh-snug:   1.25; /* @kind font */
  --lh-base:   1.55; /* @kind font */
  --lh-relaxed:1.7;  /* @kind font */

  /* ----- Spacing (4px base) ----- */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ----- Radii — Niologic favours small, restrained radii ----- */
  --radius-0: 0; /* @kind radius */
  --radius-1: 2px;
  --radius-2: 4px;     /* default — buttons, inputs */
  --radius-3: 8px;     /* cards */
  --radius-4: 12px;    /* large cards, modals */
  --radius-pill: 999px;

  /* ----- Elevation ----- */
  --shadow-1: 0 1px 2px rgba(0, 64, 100, 0.06), 0 1px 1px rgba(0, 64, 100, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 64, 100, 0.08), 0 1px 2px rgba(0, 64, 100, 0.06);
  --shadow-3: 0 12px 32px rgba(0, 64, 100, 0.12), 0 2px 6px rgba(0, 64, 100, 0.06);
  --shadow-focus: 0 0 0 3px rgba(0, 171, 197, 0.30);

  /* ----- Brand gradient (taken directly from the logo ribbons) ----- */
  --grad-ribbon: linear-gradient(135deg, #003C60 0%, #00ABC5 60%, #D4EFFC 100%); /* @kind color */
  --grad-lime:   linear-gradient(135deg, #8CC63F 0%, #BADD8C 100%); /* @kind color */
  --grad-deep:   linear-gradient(180deg, #00263F 0%, #004064 100%); /* @kind color */

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); /* @kind other */
  --ease-emphasis: cubic-bezier(0.2, 0.6, 0.2, 1.0); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* ==========================================================================
   Element defaults
   ========================================================================== */

html { color: var(--fg-1); background: var(--bg-page); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.025em; }
.display    { font-family: var(--font-display); font-size: var(--fs-display);    font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.022em; }

p { margin: 0 0 var(--sp-4); color: var(--fg-2); text-wrap: pretty; max-width: 68ch; }

/* Long-form prose — apply to <article> or any container holding reading copy.
   Switches body type to Source Serif 4 while keeping headings in Inter. */
.prose {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}
.prose p { font-family: var(--font-serif); color: var(--fg-1); margin-bottom: var(--sp-5); }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--font-display); }
.prose blockquote {
  border-left: 3px solid var(--nio-teal);
  margin: var(--sp-5) 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  font-style: italic;
  color: var(--fg-2);
}

.lead { font-size: 20px; line-height: 1.5; color: var(--fg-2); font-weight: var(--fw-regular); }
.caption  { font-size: var(--fs-caption); color: var(--fg-3); }
.overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nio-teal-deep);
}

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--fg-link-hover); text-decoration: underline; text-underline-offset: 3px; }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--bg-tint); padding: 2px 6px; border-radius: var(--radius-2); color: var(--nio-navy); }

hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--sp-6) 0; }

::selection { background: rgba(0, 171, 197, 0.25); color: var(--nio-navy); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-2); }