/* ==========================================================================
   504Labs — Design Tokens
   Basis: Seiten-Hintergrund passend zum Robotervideo (#061025), damit das
   Video nahtlos ohne sichtbare Kante einfügt. Blau-Akzent unverändert.
   ========================================================================== */

:root {
  /* ── Farbskala (auf Video-Hintergrund abgestimmt) ── */
  --color-obsidian: #061025;   /* Seiten-Hintergrund (= Video-Hintergrund) */
  --color-midnight: #0d172e;   /* Sektions-Wechsel, Karten-Hintergrund */
  --color-charcoal: #0d172e;   /* Karten-Hintergrund */
  --color-graphite: #162039;   /* Karten-Hover, Inputs */
  --color-iron:     rgba(112, 112, 125, 0.45);  /* Borders, Trennlinien (kräftig) */
  --color-slate:    rgba(112, 112, 125, 0.28);  /* Borders, Trennlinien (dezent) */
  --color-ash:      #8a90a4;   /* Tertiärtext — 5.96:1 auf --bg-page (WCAG AA) */
  --color-fog:      #8a90a4;
  --color-pearl:    #c3c3cc;   /* Fließtext */
  --color-mist:     #c3c3cc;
  --color-cloud:    #ededf3;   /* Primärtext (hell) */
  --color-white:    #ffffff;   /* Höchster Kontrast, sparsam */

  /* ── Akzent (Blau) ── */
  --color-accent: #5266eb;
  --color-accent-light: #6b7ff0;
  --color-accent-ghost: #cdddff;

  /* ── Semantische Zuordnung ── */
  --bg-page: var(--color-obsidian);
  --bg-section-alt: var(--color-midnight);
  --bg-surface: var(--color-charcoal);
  --bg-surface-hover: var(--color-graphite);
  --border-strong: var(--color-iron);
  --border-subtle: rgba(112, 112, 125, 0.18);
  --text-primary: var(--color-cloud);
  --text-secondary: var(--color-pearl);
  --text-tertiary: var(--color-pearl);
  --text-quiet: var(--color-ash);

  /* ── Typografie ──
     Schibsted Grotesk als einzige Familie (Hierarchie über Weight + Größe),
     JetBrains Mono ausschließlich für Daten (Phasen-Nummern, Fortschritt).
     Skala: Basis 16px, Schritte ~1.25er-Ratio. */
  --font-sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --text-xs:   0.8125rem; /* 13px — kleinste Labels */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5625rem; /* 25px */
  --text-2xl:  clamp(1.95rem, 2.8vw, 2.44rem);
  --text-3xl:  clamp(2.44rem, 3.8vw, 3.4rem);
  --text-4xl:  clamp(3rem, 5.2vw, 4.5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.18em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ── Spacing (Art-Gallery-Dichte) ── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --space-4xl: 11rem;

  --section-padding-y: clamp(5rem, 10vw, var(--space-3xl));
  --page-margin-x: clamp(1.5rem, 5vw, 4rem);
  --gutter-chrome: 48px;   /* Innenabstand von Nav und Footer (volle Breite) */
  --content-max: 1240px;
  --prose-max: 62ch;

  /* ── Radius (Shape Consistency Lock) ──
     Regel: Buttons = voller Pill-Radius · Karten/Panels = 4px · Inputs = 4px */
  --radius-sm: 4px;
  --radius-pill: 999px;

  /* ── Shadows (auf Navy getönt, kein Neon) ── */
  --shadow-sm: 0 1px 2px rgba(2, 4, 10, 0.4);
  --shadow-md: 0 8px 24px rgba(2, 4, 10, 0.45);
  --shadow-lg: 0 20px 60px rgba(2, 4, 10, 0.55);

  /* ── Motion (Micro-Interactions 150–250ms, Reveals ≤500ms) ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.5s;
}

/* ==========================================================================
   Sektions-Themes — Hell-Dunkel-Dramaturgie der Startseite:
   dunkler Hero (Frage), helle Content-Sektionen (Antwort), Akzent-Band (CTA).
   Komponenten nutzen semantische Tokens, daher genügt Re-Scoping.
   ========================================================================== */

.theme-light {
  --bg-page: #ffffff;
  --bg-section-alt: #f2f4f9;
  --bg-surface: #ffffff;
  --bg-surface-hover: #eef1f8;
  --border-strong: rgba(18, 20, 42, 0.25);
  --border-subtle: rgba(18, 20, 42, 0.12);
  --text-primary: #12142a;   /* 18.1:1 auf Weiß */
  --text-secondary: #3a3e58; /* 10.5:1 */
  --text-tertiary: #3a3e58;
  --text-quiet: #565b74;     /* 6.7:1 */
  --color-accent-ghost: #3d51d6; /* em/Links auf hellem Grund, 6.3:1 */
}

.theme-accent {
  --bg-page: var(--color-accent);
  --bg-section-alt: var(--color-accent);
  --bg-surface: rgba(255, 255, 255, 0.08);
  --bg-surface-hover: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.45);
  --border-subtle: rgba(255, 255, 255, 0.22);
  --text-primary: #ffffff;   /* 4.7:1 auf Akzent */
  --text-secondary: #ffffff;
  --text-tertiary: #ffffff;
  --text-quiet: #ffffff;
}