/* ============================================================
   ELETINKER — Design-Tokens (für eigenständige Artefakte)
   Marke: Elektrotechnik / Maker, Deutsch. Logo-Blau: #0029A5.
   Semantische Token-Namen und Dark-Mode entsprechen der
   Produktions-CSS von lab.eletinker.dev (siehe globals.css).
   Stand: 2026-07-12.
   ============================================================ */

/* Webfonts: ALLE Marken-Schriften liegen lokal im beiliegenden fonts/-Ordner
   (Variable Fonts, woff2, Latin-Subset inkl. Umlauten) — kein Google-Import
   mehr nötig (seit 2026-07-12): offline-fähig, DSGVO-freundlich, keine
   @import-Reihenfolge-Falle. Voraussetzung: fonts/ liegt neben dieser Datei. */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nerko One';
  src: url('fonts/NerkoOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- FARB-BASISTÖNE ---------- */

  /* Brand — „Spannungs-Blau" (Cobalt, aus dem Logo) */
  --brand-500: #0029A5;   /* primäre Markenfarbe */
  --brand-600: #001F84;   /* Hover / Press */
  --brand-700: #001763;   /* tiefe Akzente */
  --brand-400: #2B4FC7;   /* Focus-Ring, gehoben */
  --brand-300: #6A86DA;   /* weiche Akzente, Akzent auf Dunkel */
  --brand-100: #D9E0F4;   /* Wash / Fokus-Fläche */
  --brand-50:  #EEF1FA;   /* Surface-Tint, Soft-Buttons */

  /* Spark — warmes Koralle für „live / unter Spannung / Ergebnis" */
  --spark-500: #FF6B47;
  --spark-600: #E04D2A;
  --spark-400: #FF8E73;
  --spark-100: #FFE4DC;

  /* Ink — Fast-Schwarz mit Blau-Cast (Blueprint), nie reines #000 */
  --ink-900: #0A0F1F;
  --ink-800: #161C30;
  --ink-700: #2A314A;
  --ink-600: #4A5168;
  --ink-500: #6B7187;
  --ink-400: #9097A8;
  --ink-300: #BDC2CE;
  --ink-200: #E1E4EB;
  --ink-100: #EFF1F5;

  /* Paper — warme Off-Whites (Blueprint-Papier) */
  --paper-50:  #FAF8F3;   /* Seitenhintergrund */
  --paper-100: #F5F2EC;   /* Panel auf Paper */
  --paper-200: #ECE7DC;   /* Einschub / Trenner */
  --paper-300: #DDD6C5;   /* Border auf Paper */

  /* Funktional */
  --success-500: #1F7A4D;
  --warning-500: #C77A00;
  --danger-500:  #B0192B;

  /* ---------- SEMANTISCHE APP-TOKENS (Produktions-Namen) ---------- */
  --primary:          #0029A5;   /* brand-500 — Akzent, Links, Ergebniszahlen */
  --secondary:        #2B4FC7;   /* brand-400 */
  --bg:               #FAF8F3;   /* paper-50 — Seitenhintergrund */
  --bg-surface:       #FFFFFF;   /* Kartenoberfläche */
  --bg-surface-hover: #EEF1FA;   /* brand-50 */
  --text:             #0A0F1F;   /* ink-900 */
  --text-muted:       #4A5168;   /* ink-600 */
  --border:           #E1E4EB;   /* ink-200 */

  /* Ergebnis-Akzent (Orange) — hebt Ergebnisse von der Cobalt-UI ab */
  --result-bar:    #FF6B47;
  --result-bg:     rgba(255, 107, 71, 0.08);
  --result-border: rgba(255, 107, 71, 0.30);
  --result-text:   #C2410C;

  /* Hinweis-/Statusboxen */
  --note-warn-bg:     #fffbeb;
  --note-warn-border: #fde68a;
  --note-warn-text:   #92400e;
  --note-error-bg:     #fef2f2;
  --note-error-border: #fca5a5;
  --note-error-text:   #b91c1c;
  --note-ok-bg:     #ecfdf5;
  --note-ok-border: #86efac;
  --note-ok-text:   #16a34a;

  /* Haftungsausschluss */
  --disclaimer-bg:     #fff5f5;
  --disclaimer-border: #fca5a5;
  --disclaimer-text:   #b91c1c;

  /* ---------- SCHRIFTFAMILIEN ---------- */
  /* Script: nur Wortmarke + Hero-Headline (Einzelgewicht 400). */
  --font-script:  'Nerko One', 'Caveat', 'Bradley Hand', cursive;
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-body:    'Manrope', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPO-SKALA (1.250 — große Terz) ---------- */
  --fs-12: 0.75rem;     /* Eyebrows, Mono-Labels */
  --fs-14: 0.875rem;    /* Small, Captions */
  --fs-16: 1rem;        /* Body */
  --fs-18: 1.125rem;    /* Body large / Lede */
  --fs-20: 1.25rem;     /* h6 */
  --fs-24: 1.5rem;      /* h5 */
  --fs-30: 1.875rem;    /* h4 */
  --fs-38: 2.375rem;    /* h3 */
  --fs-48: 3rem;        /* h2 */
  --fs-64: 4rem;        /* h1 */
  --fs-88: 5.5rem;      /* Display */
  --fs-120: 7.5rem;     /* Hero */

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;   /* Mono-Eyebrows */

  /* ---------- SPACING (4px-Basis) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADIEN — klein, architektonisch ---------- */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;     /* Standard: Inputs, Buttons, Kacheln */
  --radius-3:  6px;     /* Karten, Panels, Tab-Bar */
  --radius-4:  10px;    /* Modals */
  --radius-pill: 999px; /* nur Status-Chips, sparsam */

  /* ---------- BORDERS ---------- */
  --bw-hair:  1px;
  --bw-rule:  1.5px;
  --bw-bold:  2px;
  --bw-heavy: 3px;

  /* ---------- SCHATTEN — zurückhaltend, technisch ---------- */
  --shadow-offset: var(--ink-900);                     /* Farbe des Hard-Offsets */
  --shadow-1: 0 1px 0 0 rgba(10, 15, 31, 0.06);
  --shadow-2: 0 2px 0 0 var(--shadow-offset);          /* harter Offset, Blueprint */
  --shadow-3: 0 4px 0 0 var(--shadow-offset);          /* CTA-Press-Tiefe */
  --shadow-soft: 0 12px 32px -12px rgba(0, 41, 165, 0.25);  /* nur Modals */
  --shadow-inset: inset 0 0 0 1.5px var(--ink-900);

  /* ---------- FOKUS & RASTER ---------- */
  --focus-ring: var(--brand-400);
  --grid-line:  rgba(0, 41, 165, 0.06);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:cubic-bezier(0.6, 0.0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---------- MENÜLEISTE (NAVBAR) — theme-abhängig ----------
     Exakte Spezifikation in references/navbar.md. White-Mode =
     Standard, Dark-Mode überschreibt unten (html.theme-dark). */
  --nav-bg:               #ffffff;
  --nav-border:           #E1E4EB;                 /* ink-200 Haarlinie */
  --nav-topline:          linear-gradient(90deg, transparent, rgba(0,41,165,0.28), rgba(0,41,165,0.12), transparent);
  --nav-fg-strong:        #0A0F1F;                 /* Wordmark / aktiver Text */
  --nav-fg:               rgba(10,15,31,0.60);     /* ruhende Links */
  --nav-fg-hover:         #0A0F1F;
  --nav-hover-bg:         rgba(0,41,165,0.08);     /* Cobalt-Tint (aktiv/offen) */
  --nav-soft-bg:          rgba(10,15,31,0.04);     /* leichter Hover */
  --nav-control-bg:       rgba(10,15,31,0.03);     /* Such-/User-Button */
  --nav-control-bg-hover: rgba(10,15,31,0.07);
  --nav-control-border:   rgba(10,15,31,0.12);
  --nav-kbd-bg:           rgba(10,15,31,0.05);
  --nav-kbd-fg:           rgba(10,15,31,0.55);
  --nav-divider:          rgba(10,15,31,0.12);
  --nav-panel-bg:         #ffffff;
  --nav-panel-border:     #E1E4EB;
  --nav-panel-shadow:     0 16px 48px rgba(10,15,31,0.16), 0 0 0 1px rgba(10,15,31,0.04);
  --nav-panel-label:      rgba(10,15,31,0.42);     /* Abschnitts-Überschriften */
  --nav-item-fg:          #0A0F1F;                 /* Eintrag Haupttext */
  --nav-item-fg-muted:    rgba(10,15,31,0.55);     /* Beschreibung/Unterlink */
  --nav-item-hover-bg:    rgba(0,41,165,0.07);     /* Eintrag Hover */
  --nav-item-border:      rgba(10,15,31,0.07);     /* Trenner */
}

/* ============================================================
   DARK MODE — „Nachtschicht"
   Aktivierung: Klasse `theme-dark` auf <html> (wie in Produktion).
   Prinzip der Produktions-CSS: Ink-Skala wird umgedeutet (Text-
   stufen hell, Flächenstufen dunkel), Brand-Skala aufgehellt,
   semantische Tokens neu gesetzt. Boden ist #0A0F1F (blaustichig),
   niemals reines #000000; Text nie reines Weiß.
   ============================================================ */
html.theme-dark {
  --brand-700: #233A8C;
  --brand-600: #2C46A8;
  --brand-500: #3D5FCC;
  --brand-400: #5B79D6;
  --brand-300: #8AA2EA;
  --brand-100: #2A3556;
  --brand-50:  #1B2238;

  --ink-900: #F2F4F8;
  --ink-800: #DDE1EA;
  --ink-700: #C2C9D6;
  --ink-600: #9AA2B8;
  --ink-500: #7C8499;
  --ink-400: #5A627C;
  --ink-300: #394360;
  --ink-200: #2A314A;
  --ink-100: #1B2236;
  --paper-100: #161C30;
  --paper-50:  #0A0F1F;

  --primary:          #8AA2EA;
  --secondary:        #5B79D6;
  --bg:               #0A0F1F;
  --bg-surface:       #161C30;
  --bg-surface-hover: #1F2740;
  --text:             #F2F4F8;
  --text-muted:       #9AA2B8;
  --border:           #2A314A;

  --result-bg:     rgba(255, 107, 71, 0.12);
  --result-border: rgba(255, 107, 71, 0.38);
  --result-text:   #FF8E73;

  --note-warn-bg:     rgba(251, 191, 36, 0.10);
  --note-warn-border: rgba(251, 191, 36, 0.30);
  --note-warn-text:   #FCD34D;
  --note-error-bg:     rgba(248, 113, 113, 0.10);
  --note-error-border: rgba(248, 113, 113, 0.32);
  --note-error-text:   #FCA5A5;
  --note-ok-bg:     rgba(34, 197, 94, 0.12);
  --note-ok-border: rgba(34, 197, 94, 0.38);
  --note-ok-text:   #4ade80;

  --disclaimer-bg:     rgba(248, 113, 113, 0.09);
  --disclaimer-border: rgba(248, 113, 113, 0.32);
  --disclaimer-text:   #FCA5A5;

  --shadow-offset: #050810;   /* Hard-Offset muss dunkler als der Boden sein */
  --focus-ring:    #8AA2EA;
  --grid-line:     rgba(106, 134, 218, 0.10);

  /* Menüleiste (Navbar) — Dark-Mode-Werte */
  --nav-bg:               #0A0F1F;
  --nav-border:           rgba(255,255,255,0.08);
  --nav-topline:          linear-gradient(90deg, transparent, rgba(255,255,255,0.30), rgba(255,255,255,0.18), transparent);
  --nav-fg-strong:        #ffffff;
  --nav-fg:               rgba(255,255,255,0.65);
  --nav-fg-hover:         #ffffff;
  --nav-hover-bg:         rgba(255,255,255,0.06);
  --nav-soft-bg:          rgba(255,255,255,0.04);
  --nav-control-bg:       rgba(255,255,255,0.04);
  --nav-control-bg-hover: rgba(255,255,255,0.08);
  --nav-control-border:   rgba(255,255,255,0.12);
  --nav-kbd-bg:           rgba(255,255,255,0.06);
  --nav-kbd-fg:           rgba(255,255,255,0.5);
  --nav-divider:          rgba(255,255,255,0.14);
  --nav-panel-bg:         rgba(10,10,16,0.98);
  --nav-panel-border:     rgba(255,255,255,0.08);
  --nav-panel-shadow:     0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  --nav-panel-label:      rgba(255,255,255,0.25);
  --nav-item-fg:          rgba(255,255,255,0.9);
  --nav-item-fg-muted:    rgba(255,255,255,0.55);
  --nav-item-hover-bg:    rgba(43,79,199,0.14);
  --nav-item-border:      rgba(255,255,255,0.05);

  color-scheme: dark;
}

/* ============================================================
   ELEMENT-DEFAULTS
   ============================================================ */
html { background: var(--bg); color: var(--text); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
  font-weight: 800;
}
h1 { font-size: clamp(var(--fs-48), 6vw, var(--fs-88)); font-weight: 900; font-stretch: 95%; }
h2 { font-size: clamp(var(--fs-38), 4.5vw, var(--fs-64)); font-weight: 800; }
h3 { font-size: var(--fs-38); font-weight: 800; }
h4 { font-size: var(--fs-30); font-weight: 700; }
h5 { font-size: var(--fs-24); font-weight: 700; }
h6 { font-size: var(--fs-20); font-weight: 600; letter-spacing: 0; }

p  { margin: 0; line-height: var(--lh-relaxed); text-wrap: pretty; }
small { font-size: var(--fs-14); color: var(--text-muted); }

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

a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-1) var(--ease-out);
}
a:hover { color: var(--brand-600); }
html.theme-dark a:hover { color: var(--brand-100); }  /* auf Dunkel wird Hover heller */

::selection { background: var(--spark-500); color: #0A0F1F; }

/* ============================================================
   UTILITY: Eyebrow-Caps — stark genutztes Markenmuster
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--primary);
}

.lede {
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
}

/* ============================================================
   UTILITY: Blueprint-Grid-Hintergründe
   ============================================================ */
.bg-blueprint {
  /* modusunabhängig: immer Cobalt + weißes Grid */
  background-color: #0029A5;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  color: #FFFFFF;
}
.bg-grid-paper {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ============================================================
   UTILITY: Logo-Umschaltung hell/dunkel
   ============================================================ */
.logo-dark { display: none; }
html.theme-dark .logo-light { display: none; }
html.theme-dark .logo-dark  { display: block; }