/* ═══════════════════════════════════════════════════════════════════════
   Velopit Design Tokens — THE single value source (#520 C2, Entscheid 1).
   Served from Vite publicDir (src/public → dist/tokens.css, unhashed;
   Cache-Control: 1h must-revalidate via server.ts/staticCache).

   Consumed by:
   - SPA:            src/index.html   <link rel="stylesheet" href="/tokens.css">
   - Landing (SEO):  src/server/public/landing/<page>/index.html (before landing.css)
   - Blog:           follows with the C2b rename pass (#520)

   Rules:
   - :root = Dark (reference), html.light = Light overrides. Keep both in sync.
   - Composed form (--bg-base) for direct var() consumers; channel twins
     (--bg-base-rgb) ONLY for the Tailwind mapping in src/tailwind.config.js.
     ⚠️ Every value change lands in BOTH forms — in BOTH themes.
   - landing.css / blog.css must NOT define token values (drift is structural
     now, not disciplinary) — see ADR-18 in docs/decisions.md.
   ═══════════════════════════════════════════════════════════════════════ */

/* Landing Page Design Tokens — Dark (default)
   Redesign "Das technische Dossier" (deep blue, editorial): refreshed
   neutral scale + new tokens. --accent stays #3b82f6 for the app shell;
   the landing itself uses --accent-blue (refined periwinkle) for headline
   keywords and --flag (oxide) strictly for "Empfohlen"/attention. */
:root {
  /* Native UI (scrollbars, form controls, date pickers) follows the theme
     (#520 Block E). html.light flips it below. */
  color-scheme: dark;
  --bg-base: #0A111E;
  --bg-inset: #0B1320;
  --bg-subtle: #161F30;
  --bg-elevated: #1e293b;
  --bg-overlay: #334155;
  --border-subtle: #1C2A3E;
  --border-default: #2A3C54;
  --border-strong: #475569;
  --text-primary: #F4F7FA;
  --text-body: #C6CFDB;
  --text-secondary: #9DACBE;
  --text-tertiary: #8A99AC;
  --text-disabled: #475569;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-fg: #ffffff;
  --accent-subtle: rgba(59,130,246,0.08);
  --accent-border: rgba(59,130,246,0.2);
  --accent-glow: rgba(59,130,246,0.12);
  --focus: #60a5fa;
  --link: #6D9BFF;
  --link-hover: #9DBBFF;
  /* Status (Design-Entscheid 2026-07-15): EINE Statusfarbe je Status (Text/
     Icon/Label/Dots/Bars) — dark = die helle AA-Textstufe, base==fg. -hover
     nur für gefüllte destruktive Buttons; -tint = die einzige erlaubte
     Status-Fläche (8 %, gebackene Alpha wie accent-subtle, kein Modifier). */
  --danger: #f87171;
  --danger-fg: #f87171;
  --danger-hover: #ef4444;
  --danger-tint: rgba(248,113,113,0.08);
  --success: #34d399;
  --success-fg: #34d399;
  --success-tint: rgba(52,211,153,0.08);
  --warning: #fbbf24;
  --warning-fg: #fbbf24;
  --warning-tint: rgba(251,191,36,0.08);
  /* Hover-Leiter (OQ 6 entschieden): -tint = feine Zeilen-Stufe,
     -control = kräftigere Stufe für Pillen/Chips/Buttons. */
  --hover-tint: rgba(255,255,255,0.045);
  --hover-control: rgba(255,255,255,0.08);
  /* Modal-Scrims (theme-abhängig; strong = immersive Overlays/Lightbox). */
  --scrim: rgba(6,10,18,0.72);
  --scrim-strong: rgba(4,7,13,0.90);
  --accent-blue: #82A8DE;
  --accent-blue-border: rgba(130,168,222,0.22);
  --flag: #F0714A;
  --paper: #F4F7FA;
  --paper-hover: #ffffff;
  --blue-2: #5b9bff;
  --orange: #f97316;
  --orange-2: #fb923c;
  --font-display: 'Schibsted Grotesk', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Channel twins (R G B) — consumed ONLY by the Tailwind color mapping
     in tailwind.config.js via rgb(var(--x-rgb) / <alpha-value>), so opacity modifiers
     work without touching any direct var() consumer.
     ⚠️ Every value change lands in BOTH forms (composed above + channel
     here) — and in the html.light twins below. Scheduled for removal
     once Tailwind v4's color-mix() makes them obsolete (#520). */
  --bg-base-rgb: 10 17 30;
  --bg-inset-rgb: 11 19 32;
  --bg-subtle-rgb: 22 31 48;
  --bg-elevated-rgb: 30 41 59;
  --bg-overlay-rgb: 51 65 85;
  --text-primary-rgb: 244 247 250;
  --text-body-rgb: 198 207 219;
  --text-secondary-rgb: 157 172 190;
  --text-tertiary-rgb: 138 153 172;
  --text-disabled-rgb: 71 85 105;
  --border-subtle-rgb: 28 42 62;
  --border-default-rgb: 42 60 84;
  --border-strong-rgb: 71 85 105;
  --accent-rgb: 59 130 246;
  --accent-hover-rgb: 37 99 235;
  --accent-fg-rgb: 255 255 255;
  --focus-rgb: 96 165 250;
  --link-rgb: 109 155 255;
  --link-hover-rgb: 157 187 255;
  --danger-rgb: 248 113 113;
  --danger-fg-rgb: 248 113 113;
  --danger-hover-rgb: 239 68 68;
  --success-rgb: 52 211 153;
  --success-fg-rgb: 52 211 153;
  --warning-rgb: 251 191 36;
  --warning-fg-rgb: 251 191 36;
  --accent-blue-rgb: 130 168 222;
  --paper-rgb: 244 247 250;
  --paper-hover-rgb: 255 255 255;
  /* Elevation (#520 Block E, OQ 5): dark uses a white inset highlight +
     hard drop; light flips to soft slate drops WITHOUT the white inset
     (would read as a hard edge on light surfaces). */
  --shadow-panel: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-well: inset 0 1px 2px rgba(0,0,0,0.4);
  --shadow-popover: 0 20px 50px rgba(0,0,0,0.5);
  /* On-Image (Auth-Markenpanel): Text/Deko auf dem immer-dunklen Foto/Navy-
     Panel der Login-/Register-Screens. Theme-FIX — beide Blöcke tragen
     identische Werte, das Panel flippt nie. Composed-only, keine -rgb-Twins
     (kein Alpha-Modifier-Bedarf). */
  --on-image-fg: #EEF2F8;
  --on-image-muted: #AFBDD6;
  --on-image-subtle: #DCE4F2;
  --on-image-check: #8FB8A5;
  --on-image-panel: #0A111E;
  --auth-panel-grad: linear-gradient(155deg, rgba(10,17,30,0.35) 0%, rgba(10,17,30,0.62) 55%, rgba(10,17,30,0.86) 100%);
}

/* App Light Mode — Tier-1-Palette aus dem Design-Mockup (#520): Flächen, Text,
   Rahmen und Akzent auf die Mockup-Werte gezogen, WCAG-AA-sauber. Bewusste
   Abweichungen: elevated bleibt ein naher Weiss-Ton (nicht pures #FFF wie im
   Mockup), damit Karten-Hover/Chips/Divider sichtbar bleiben; Status- und
   Caption-Text nutzen die dunkleren AA-sicheren -fg-Werte; line-strong ist
   eine dokumentierte Sub-3:1-Ausnahme (wie line-default). Links=Akzent und der
   strikte panel==elevated-Kollaps sind bewusst NICHT hier (spaetere Nachzuege). */
html.light {
  color-scheme: light;
  --bg-base: #F4F6F9;
  --bg-inset: #F1F4F8;
  --bg-subtle: #FFFFFF;
  --bg-elevated: #E9ECF1;
  --bg-overlay: #E3E7ED;
  --border-subtle: #E4E7EC;
  --border-default: #DFE4EB;
  --border-strong: #CBD3DE;
  --text-primary: #101827;
  --text-body: #1E2A40;
  --text-secondary: #556278;
  --text-tertiary: #646F84;
  --text-disabled: #A9B1C1;
  --accent: #2563eb;
  --accent-hover: #1D4FD1;
  --accent-fg: #ffffff;
  --accent-subtle: rgba(37,99,235,0.06);
  --accent-border: rgba(37,99,235,0.15);
  --accent-glow: rgba(37,99,235,0.08);
  --focus: #2563eb;
  --link: #2563EB;
  --link-hover: #1D4FD1;
  /* Status light: base = Label/Icon/Dot-Farbe (A1), -fg = dunklere
     Fließtext-Stufe (AA auf Seiten-Grund). success-fg behält #047857
     (AA-Default — Design gab nur danger/warning-Fließtextwerte). */
  --danger: #dc2626;
  --danger-fg: #C81E1E;
  --danger-hover: #B91C1C;
  --danger-tint: rgba(220,38,38,0.08);
  --success: #059669;
  --success-fg: #047857;
  --success-tint: rgba(5,150,105,0.08);
  --warning: #B45309;
  --warning-fg: #95440A;
  --warning-tint: rgba(180,83,9,0.08);
  --hover-tint: rgba(15,23,42,0.04);
  --hover-control: rgba(15,23,42,0.07);
  --scrim: rgba(20,28,42,0.38);
  --scrim-strong: rgba(15,20,32,0.72);
  --accent-blue: #3d6cb4;
  --accent-blue-border: rgba(61,108,180,0.22);
  --flag: #c2492a;
  --paper: #0f172a;
  --paper-hover: #1e293b;
  --blue-2: #2563eb;
  --orange: #f97316;
  --orange-2: #fb923c;
  /* Channel twins — see the :root block for the sync rule. */
  --bg-base-rgb: 244 246 249;
  --bg-inset-rgb: 241 244 248;
  --bg-subtle-rgb: 255 255 255;
  --bg-elevated-rgb: 233 236 241;
  --bg-overlay-rgb: 227 231 237;
  --text-primary-rgb: 16 24 39;
  --text-body-rgb: 30 42 64;
  --text-secondary-rgb: 85 98 120;
  --text-tertiary-rgb: 100 111 132;
  --text-disabled-rgb: 169 177 193;
  --border-subtle-rgb: 228 231 236;
  --border-default-rgb: 223 228 235;
  --border-strong-rgb: 203 211 222;
  --accent-rgb: 37 99 235;
  --accent-hover-rgb: 29 79 209;
  --accent-fg-rgb: 255 255 255;
  --focus-rgb: 37 99 235;
  --link-rgb: 37 99 235;
  --link-hover-rgb: 29 79 209;
  --danger-rgb: 220 38 38;
  --danger-fg-rgb: 200 30 30;
  --danger-hover-rgb: 185 28 28;
  --success-rgb: 5 150 105;
  --success-fg-rgb: 4 120 87;
  --warning-rgb: 180 83 9;
  --warning-fg-rgb: 149 68 10;
  --accent-blue-rgb: 61 108 180;
  --paper-rgb: 15 23 42;
  --paper-hover-rgb: 30 41 59;
  --shadow-panel: 0 1px 3px rgba(15,23,42,0.10);
  --shadow-well: inset 0 1px 2px rgba(15,23,42,0.10);
  --shadow-popover: 0 20px 50px rgba(15,23,42,0.18);
  /* On-Image — theme-FIX, identisch zum :root-Block (siehe Regel dort). */
  --on-image-fg: #EEF2F8;
  --on-image-muted: #AFBDD6;
  --on-image-subtle: #DCE4F2;
  --on-image-check: #8FB8A5;
  --on-image-panel: #0A111E;
  --auth-panel-grad: linear-gradient(155deg, rgba(10,17,30,0.35) 0%, rgba(10,17,30,0.62) 55%, rgba(10,17,30,0.86) 100%);
}