/* =========================================================================
   Bits & Brain — Design Tokens
   Brand color: RGB 27 / 72 / 126  →  #1B487E
   Corporate font: Calibri (Microsoft, proprietär — nicht webfrei lizenziert).
   Web-Fallback: Carlito (Google Fonts). Carlito ist metrisch identisch zu
   Calibri (Buchstabenbreiten, x-Höhe, Zeilenhöhe), wird auf Office-/Windows-
   Systemen automatisch durch echtes Calibri ersetzt, auf Mac/Linux greift
   Carlito. Vor Live-Gang lokal hosten (Datenschutz, kein US-CDN-Aufruf).
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* --- Brand --- */
  --brand:        #1B487E;
  --brand-rgb:    27 72 126;

  /* --- Brand scale (oklch ramps from #1B487E) ----------------------------
     Generated as monochromatic tints/shades. Use sparingly — primary surface
     for the brand is solid #1B487E or pure white. Tints are for hover,
     dividers, and subtle data-viz backgrounds. */
  --brand-50:     #EEF3F9;
  --brand-100:    #D6E1ED;
  --brand-200:    #A9BFD7;
  --brand-300:    #7B9CC1;
  --brand-400:    #4D79AB;
  --brand-500:    #1B487E;  /* canonical */
  --brand-600:    #163C6A;
  --brand-700:    #112F53;
  --brand-800:    #0C223D;
  --brand-900:    #081728;

  /* --- Neutrals (warm-cool neutral, slightly tinted toward brand) --- */
  --white:        #FFFFFF;
  --paper:        #FAFBFD;   /* page bg alt */
  --line:         #E4E8EF;   /* hairlines */
  --line-strong:  #C9D2DF;
  --ink-3:        #6E7A8A;   /* tertiary text */
  --ink-2:        #3F4A5C;   /* secondary text */
  --ink-1:        #11192A;   /* primary text */
  --black:        #000000;

  /* --- Semantic foreground / surface --- */
  --fg-1:         var(--ink-1);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-on-brand:  var(--white);
  --fg-link:      var(--brand-500);
  --fg-link-hover:var(--brand-700);

  --surface-1:    var(--white);
  --surface-2:    var(--paper);
  --surface-3:    var(--brand-50);
  --surface-brand:var(--brand-500);

  --border:       var(--line);
  --border-strong:var(--line-strong);
  --focus-ring:   color-mix(in oklab, var(--brand-500) 60%, transparent);

  /* --- Status (kept monochrome, brand-only palette) -----------------------
     The brief restricts color to #1B487E. Status states therefore use brand
     tonal weight (heavier = warning/error, lighter = info/success) and
     iconography to differentiate, not hue. */
  --status-info:    var(--brand-500);
  --status-success: var(--brand-700);
  --status-warning: var(--brand-800);
  --status-error:   var(--brand-900);

  /* --- Type families ---
     Order matters: Calibri first (Windows/Office), Carlito as web fallback
     (metrically identical), then generic sans. */
  --font-sans:    "Calibri", "Carlito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type scale (modular, ratio ≈ 1.250) --- */
  --fs-12:  0.75rem;     /* 12 — micro / eyebrow */
  --fs-14:  0.875rem;    /* 14 — caption / meta */
  --fs-16:  1rem;        /* 16 — body */
  --fs-18:  1.125rem;    /* 18 — body large */
  --fs-20:  1.25rem;     /* 20 — lede */
  --fs-24:  1.5rem;      /* 24 — h4 */
  --fs-30:  1.875rem;    /* 30 — h3 */
  --fs-36:  2.25rem;     /* 36 — h2 */
  --fs-48:  3rem;        /* 48 — h1 */
  --fs-64:  4rem;        /* 64 — display */
  --fs-80:  5rem;        /* 80 — hero display */

  /* --- Line height --- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* --- Tracking --- */
  --tr-tight: -0.02em;
  --tr-snug:  -0.01em;
  --tr-normal: 0;
  --tr-wide:   0.06em;
  --tr-eyebrow:0.18em;   /* used for ALL-CAPS labels */

  /* --- Weights --- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* --- Spacing (4px base) --- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* --- Radius --- */
  --r-0:   0;
  --r-1:   2px;   /* hairline pills, inputs in dense UI */
  --r-2:   4px;   /* default for inputs */
  --r-3:   8px;   /* cards, secondary buttons */
  --r-4:   12px;  /* large cards */
  --r-5:   20px;  /* hero panels */
  --r-pill: 999px;

  /* --- Shadows (low, technical — never blurry-soft pillows) --- */
  --shadow-0: 0 0 0 1px var(--border);
  --shadow-1: 0 1px 2px rgb(17 25 42 / 0.05), 0 0 0 1px var(--border);
  --shadow-2: 0 2px 6px rgb(17 25 42 / 0.06), 0 0 0 1px var(--border);
  --shadow-3: 0 8px 24px rgb(17 25 42 / 0.08), 0 0 0 1px var(--border);
  --shadow-brand: 0 8px 24px rgb(27 72 126 / 0.18);

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;

  /* --- Backgrounds (asset paths) --- */
  --bg-blue-white:        url("./assets/bg-blue-white.svg");
  --bg-white-blue-shaded: url("./assets/bg-white-blue-shaded.svg");
}

/* =========================================================================
   Base + semantic utilities
   ========================================================================= */

html { color-scheme: light; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — semantic defaults */
h1, .h1 {
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-black);
  color: var(--fg-1);
}
h2, .h2 {
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: var(--fw-bold);
}
h3, .h3 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
h4, .h4 {
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}

p, .p {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 70ch;
}

.lede {
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

.eyebrow {
  font-size: var(--fs-12);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--brand-500);
}

.caption {
  font-size: var(--fs-14);
  color: var(--fg-3);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-2);
}

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