/* ============================================================
   NORTHCORE — DESIGN TOKENS
   The Living Operating Field · abgeleitet aus den drei Logos:
   Kompass (Northcore) · Leuchtturm (Northlightframe) · Schwert (Sword)
   ============================================================ */

:root {
  /* ---------- Farbwelt: tiefes Blauschwarz + Gold/Silber ---------- */
  --bg-primary: #07090E;
  --bg-secondary: #0B0E15;
  --bg-deep: #05070B;
  --surface: #10141D;
  --surface-deep: #0D1119;
  --surface-raised: #141926;
  --line: rgba(176, 186, 202, 0.14);
  --line-strong: rgba(176, 186, 202, 0.26);

  /* Helle Welt (Northlightframe-Sektionen) */
  --bg-light: #EFECE4;
  --surface-light: #FFFFFF;
  --surface-light-alt: #FBFAF7;
  --line-light: rgba(23, 26, 33, 0.12);

  /* Text dunkelgrund */
  --text-primary: #F1EDE3;
  --text-body: #A7ADB8;
  --text-secondary: #B9BEC7;
  --text-muted: #7F8794; /* WCAG AA: >=4.5:1 auch auf --surface-raised (#141926) */
  /* Text hellgrund */
  --text-primary-l: #171A21;
  --text-body-l: #5A6069;
  --text-muted-l: #5F636A; /* WCAG AA: >=4.5:1 auch auf hellem --bg-deep (#E7E3D9) */

  /* Die drei Kräfte — eine Goldfamilie, drei Träger */
  --nc-gold: #C9A468;          /* Northcore: Struktur, Gravitation */
  --nc-gold-bright: #E4C990;   /* Hover/aktiv */
  --nc-gold-dim: rgba(201, 164, 104, 0.32);
  --nlf-silver: #C9CFD9;       /* Northlightframe: Licht, Kontur */
  --nlf-silver-dim: rgba(201, 207, 217, 0.30);
  --sword-edge: #EDD9AC;       /* Sword: hellster, schärfster Ton */
  --sword-edge-dim: rgba(237, 217, 172, 0.28);

  /* Zustandsfarben (Demo-State-Machines, Formulare) */
  --state-ok: #8FB98B;
  --state-warn: #D9B36C;
  --state-risk: #C98268;
  --state-info: #8FA6BF;

  /* Glow — sparsam, nie Bloom-Orgie */
  --glow-gold: 0 0 24px rgba(201, 164, 104, 0.18);
  --glow-silver: 0 0 20px rgba(201, 207, 217, 0.12);

  /* ---------- Typografie ---------- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, "Cascadia Mono", monospace;

  --fs-h1: clamp(44px, 5.8vw, 88px);
  --fs-h2: clamp(32px, 3.8vw, 56px);
  --fs-h3: clamp(22px, 2.2vw, 30px);
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 16.5px;
  --fs-ui: 14px;
  --fs-eyebrow: 11.5px;
  --fs-meta: 12.5px;

  --lh-display: 1.04;
  --lh-h2: 1.08;
  --lh-body: 1.65;

  --ls-display: -0.028em;
  --ls-h2: -0.022em;
  --ls-eyebrow: 0.22em;
  --ls-wordmark: 0.30em;

  /* ---------- Raum & Grid ---------- */
  --page-max: 1400px;
  --page-pad: 44px;
  --section-pad: clamp(96px, 12vh, 150px);
  --gap-grid: 28px;
  --radius: 3px;
  --radius-lg: 6px;

  /* ---------- Motion-Tokens ---------- */
  --t-instant: 120ms;   /* Feedback: Hover, Press */
  --t-micro: 200ms;     /* Mikrozustand: Toggle, Fokus */
  --t-comp: 340ms;      /* Komponente: Karte, Panel */
  --t-morph: 640ms;     /* Layout-Morph: Rolle, Modul */
  --t-chapter: 1200ms;  /* Kapitelübergang */

  /* Drei Easing-Charaktere */
  --ease-core: cubic-bezier(0.22, 0.08, 0.14, 1);   /* Northcore: schwer, stabilisierend */
  --ease-light: cubic-bezier(0.33, 0.02, 0.20, 1);  /* Northlightframe: weich, offenbarend */
  --ease-sword: cubic-bezier(0.62, 0.04, 0.08, 1);  /* Sword: präzise, gerichtet */

  /* Stagger-Basis */
  --stagger: 70ms;

  /* Z-Ordnung */
  --z-field: 0;
  --z-content: 10;
  --z-nav: 120;
  --z-overlay: 200;
  --z-boot: 300;
  --z-skip: 400;

  /* ---------- Alias-Schicht ----------
     Alternative Token-Namen der Seiten-Stylesheets — ein Ort, eine Wahrheit.
     ACHTUNG: var() in Custom-Property-Werten löst am DEFINIERENDEN Element
     (:root) auf, nicht am nutzenden — Farbaliase kippen deshalb NICHT
     automatisch und werden im [data-theme="light"]-Block re-deklariert. */
  --text-tertiary: var(--text-muted);
  --font-heading: var(--font-display);
  --surface-1: var(--surface);
  --surface-2: var(--surface-raised);
  --radius-md: var(--radius-lg);
  --radius-pill: 999px;
  --fs-mono: 13px;
  --nav-h: 76px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

/* Helle Sektionen kippen die Textrollen */
[data-theme="light"] {
  --bg-primary: var(--bg-light);
  --bg-secondary: var(--surface-light-alt);
  --bg-deep: #E7E3D9;
  --surface: var(--surface-light);
  --surface-deep: var(--surface-light-alt);
  --surface-raised: var(--surface-light);
  --text-primary: var(--text-primary-l);
  --text-body: var(--text-body-l);
  --text-secondary: #4A505A;
  --text-muted: var(--text-muted-l);
  --line: var(--line-light);
  --line-strong: rgba(23, 26, 33, 0.22);
  --glow-gold: none;
  --glow-silver: none;
  /* Farbaliase re-deklarieren: lösen hier gegen die hellen Werte auf */
  --text-tertiary: var(--text-muted);
  --surface-1: var(--surface);
  --surface-2: var(--surface-raised);
  /* color vererbt als AUFGELÖSTER Wert — ohne diese Zeile trügen Elemente
     ohne eigene color-Regel weiter die dunkle body-Farbe (#A7ADB8 auf Weiß). */
  color: var(--text-body);
}

@media (max-width: 768px) {
  :root {
    --page-pad: 24px;
    --section-pad: clamp(72px, 10vh, 104px);
    --gap-grid: 18px;
  }
}

@media (max-width: 480px) {
  :root {
    /* „Unternehmens-" (H1-­-Trennpunkt) muss in 272px passen —
       44px Minimum wäre zu breit, Browser bräche sonst ohne Trennstrich */
    --fs-h1: clamp(34px, 11vw, 44px);
    --fs-h2: clamp(28px, 9vw, 32px);
  }
}