/*
 * Karriaro Design-Tokens — Sprint 9b, erweitert Sprint 147
 *
 * Single-Source-of-Truth fuer Spacing, Radius, Shadow, Type-Scale.
 * Wird in jede HTML-Seite per <link rel="stylesheet" href="/css/tokens.css">
 * eingebunden, BEVOR das seiteneigene <style>-Block geladen wird, damit
 * branchen-spezifische Overrides moeglich bleiben.
 *
 * ─── Namespace-Konvention (Sprint 147, Senior-Review M-12) ───
 * Hier-definiert (globale Tokens):
 *   --gap-*, --kr-*, --color-*, --type-*, --ease-*, --radius-*, --shadow-*,
 *   --btn-pad-*, --font-*  → in JEDER Sub-Page nutzbar via var(--…).
 *
 * Sub-Page-eigene Tokens (Portfolio + Geo + Audit + Gruender etc.):
 *   --accent, --accent-dark, --accent-bg, --bg, --bg-soft, --text,
 *   --text-soft, --border, --font, --serif, --max
 *   → DUERFEN nicht denselben Namen wie ein globales Token haben (Cascade-Trap!).
 *
 * Sub-Page-Branchen-Variationen die globale Tokens "thematisieren":
 *   --p-radius, --p-radius-lg, --p-shadow-sm, --p-shadow, --p-shadow-lg
 *   (`--p-` = Portfolio-Brand-Override; vorher waren das Shadowing-Konflikte
 *   mit --radius / --shadow aus diesem File, jetzt eigene Namespace).
 */

:root {
  /* Radius — sechs konsistente Stufen */
  --radius-xs: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Spacing-Skala (8px-Base, Refactoring-UI-Pattern) */
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 32px;
  --gap-xl: 48px;
  --gap-2xl: 64px;
  --gap-3xl: 96px;

  /* Shadow — neutral, ueber Brand-Farben legbar */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.10);
  --shadow-xl: 0 32px 72px rgba(0,0,0,0.12);

  /* Sprint 144 — Easing-Tokens (Senior-Review M-14).
   * Vorher: 4 cubic-bezier-Varianten + ease-out + linear quer durchs
   * Repo verstreut (mobile-overrides, hero-polish, m-interactions). Token
   * vereinheitlicht Motion-Sprache; Migration der Hardcodes erfolgt
   * inkrementell, neue Animationen MUESSEN diese Tokens benutzen. */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);    /* Default UI-Smooth */
  --ease-spring:   cubic-bezier(0.32, 0.72, 0.16, 1); /* Snappy spring-feel */
  --ease-premium:  cubic-bezier(0.16, 1, 0.3, 1);     /* Overshoot, Hero opsz-reveal */

  /* ─── Phyllotaxis-Motion-System (Award-Leitidee «Aus einem Kern wächst alles») ───
   * Spec: docs/MOTION.md + docs/LEITIDEE.md. Genau ZWEI Kurven, fuenf Zeiten,
   * ein Saat-Ursprung, eine Regel: alles keimt aus einem Punkt, nie gleitet
   * etwas herein. Additiv eingefuehrt 2026-06-12 — bestehende Hardcodes wandern
   * inkrementell hierauf zu (keine neue cubic-bezier-Variante mehr anlegen). */
  --ease-grow:   cubic-bezier(.34, 1.56, .64, 1); /* Keimung — organischer Overshoot (= Splash-Saat) */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);    /* Beruhigung — ruhiges Ankommen (= FLIP / opsz-Atem) */

  /* Fibonacci-nahe Zeitskala — selbst das Timing ist Phyllotaxis */
  --t-1: 90ms;
  --t-2: 150ms;
  --t-3: 240ms;
  --t-4: 390ms;
  --t-5: 630ms;

  /* Keim-Ursprung: Eintritte BLUEHEN aus EINEM PUNKT (scale+fade), nie translateX/Y.
   * Nutzung:
   *   transform-origin: var(--origin-seed);
   *   @keyframes kr-keim { from { transform: scale(var(--grow-from)); opacity: 0 }
   *                        to   { transform: none; opacity: 1 } }
   * ⚠️ --origin-seed = ZENTRIERT (50% 50%): symmetrische Expansion aus der Mitte,
   * KEIN dominanter Richtungsvektor → kann nicht als Slide (miss)gelesen werden.
   * Frueh getestet: unten-mittig (50% 100%) + zu sanftes --grow-from liest sich wie
   * ein Aufwaerts-Slide (nur die Oberkante wandert) → bewusst zentriert. Pro Element
   * ueberschreibbar (z.B. Hero-«I» wurzelt unten via eigener Animation). */
  --origin-seed: 50% 50%;
  --grow-from: 0.62;

  /* Type-Scale (clamp-Wertepaare, branchen-spezifische Fonts setzen Family) */
  --type-display-min: 56px;
  --type-display-max: 88px;
  --type-h1-min: 40px;
  --type-h1-max: 64px;
  --type-h2-min: 28px;
  --type-h2-max: 44px;
  --type-h3-min: 20px;
  --type-h3-max: 28px;
  --type-body: 16px;
  --type-small: 14px;
  --type-eyebrow: 11px;

  /* Letter-Spacing (Display-Type) */
  --tracking-tight: -0.025em;
  --tracking-snug: -0.015em;
  --tracking-eyebrow: 0.18em;

  /* Button-Padding-Tokens */
  --btn-pad-sm: 8px 16px;
  --btn-pad: 14px 28px;
  --btn-pad-lg: 18px 36px;

  /* Karriaro-Brand-Tokens (Hauptmarke — Sub-Pages koennen ueberschreiben)
   * Sprint 42 — von Apple-Klon auf Manufaktur-Palette migriert (siehe Hauptseite Sprint 39).
   * --kr-blue ist jetzt Manufaktur-Indigo; --kr-bg ist warmes Cream-Bone statt Apple-Grau. */
  --kr-ink: #14202B;            /* Onyx — tiefes Dunkel */
  --kr-blue: #1A2E40;            /* Manufaktur-Indigo (primärer Brand-Akzent) */
  --kr-blue-light: #4A6B85;     /* Indigo-light — Hover / sekundär */
  --kr-gold: #8A7B5C;            /* Werkstatt-Gold (sekundärer Akzent) */
  --kr-grey: #525E6B;            /* Graphit-soft — sekundär-Text */
  --kr-grey-soft: #6B5F52;       /* Sprint 141 — Graphit-light auf 5.7:1 contrast (#6B5F52 auf #F8F4ED) — WCAG-AA pass (vorher #8A8278 = 3.8:1) */
  --kr-bg: #FBFAF7;              /* Bone — fast-weiß, warm */
  --kr-bg-soft: #F8F4ED;         /* Skizzen-Cream — wärmster Hellton */
  --kr-border: rgba(20,30,40,0.08);

  /* Sprint 128 — Brand-Token-Vereinheitlichung
   * Aliase, damit mobile-overrides.css (--color-*) und Brand-Token (--kr-*)
   * auf eine Single-Source zeigen. mobile-overrides.css darf weiterhin
   * --color-* verwenden, neue Regeln aber bitte --kr-* */
  --color-cream-soft: var(--kr-bg-soft);
  --color-cream: var(--kr-bg);
  --color-indigo: var(--kr-blue);
  --color-indigo-strong: #061320;
  --color-indigo-deep: #0F1F2E;
  --color-graphite: var(--kr-grey);
  --color-graphite-soft: var(--kr-grey-soft);
  --color-gold: var(--kr-gold);
  /* Sprint 184 — accessibler Gold-Ton NUR für Kleintext (Eyebrows/Labels/Marker).
     #6E5F3F = 5,97:1 auf bone — WCAG-AA-Normaltext. --color-gold (#8A7B5C) bleibt
     für Großtext/Dekor (Folio-Ziffern, Pull-Quote-Ornament, SVG) = 3:1-Großtext-pass. */
  --color-gold-text: #6E5F3F;
  --color-ink: var(--kr-ink);
  --color-border: var(--kr-border);

  /* Sprint 134 — Magazine-Page-BG-Tokens (Single-Source für JS-Section-Spy).
   * Cream-Töne synchron zu mSectionBgSpy in m-interactions.js. */
  --m-bg-hero:     #FBFAF7;
  --m-bg-demos:    #F4EDE0;
  --m-bg-personas: #EFE8DA;
  --m-bg-tools:    #FBFAF7;
  --m-bg-siegel:   #F0E8D8;
  --m-bg-kontakt:  #FBFAF7;
}

/* Sprint 134 — Dark-Mode-Tokens (ADA-Award-Voraussetzung).
 * Mappen die wichtigsten Brand-Tokens auf eine dunkle, warme Editorial-
 * Palette. Aktiv via @media (prefers-color-scheme: dark) — kein User-Toggle,
 * folgt OS-Setting. Reduced-Contrast für editorial-feel (kein OLED-Schwarz). */
@media (prefers-color-scheme: dark) {
  :root {
    --kr-ink: #f5f3ee;
    --kr-bg: #0f1217;
    --kr-bg-soft: #161a20;
    --kr-blue: #4A6B85;
    --kr-blue-light: #6B8AA3;
    --kr-grey: #b8bcc3;
    --kr-grey-soft: #8a8e96;
    --kr-gold: #B59F75;
    --kr-border: rgba(245, 243, 238, 0.08);

    --color-cream-soft: #1a1e25;
    --color-cream: #0f1217;
    --color-indigo: #6B8AA3;
    --color-indigo-strong: #f5f3ee;
    --color-indigo-deep: #1a1e25;
    --color-graphite-soft: #8a8e96;
    --color-gold: #B59F75;
    --color-gold-text: #B59F75;
    --color-ink: #f5f3ee;
    --color-border: rgba(245, 243, 238, 0.08);

    /* Dark-Magazine-Page-BG-Tokens — wärmer als pure-schwarz, dezent abgestuft */
    --m-bg-hero:     #0f1217;
    --m-bg-demos:    #14181f;
    --m-bg-personas: #181c23;
    --m-bg-tools:    #0f1217;
    --m-bg-siegel:   #1a1e25;
    --m-bg-kontakt:  #0f1217;
  }
}

/* Reduced-Motion respektieren (Refactoring-UI-Standard) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Sprint 143 — Global :focus-visible Brand-Outline (WCAG 2.4.7).
 * Award-Criteria: Keyboard-Navigation darf nie unsichtbar sein.
 * Vorher: viele Selektoren mit outline:none ohne Ersatz. Diese Regel
 * deckt jetzt ALLE Tab-Stops; Page-Level-outline:none-Regeln bleiben
 * fuer den :focus-State (Mouse-Click), nur :focus-visible (Tab) bekommt
 * den Brand-Indigo-Ring. */
:root {
  --kr-focus-ring: var(--kr-blue, #1A2E40);
  --kr-focus-ring-offset: var(--kr-bg, #FBFAF7);
}
@media (prefers-color-scheme: dark) {
  :root {
    --kr-focus-ring: var(--kr-cream-soft, #F8F4ED);
    --kr-focus-ring-offset: var(--kr-bg, #0f1217);
  }
}
:focus-visible {
  outline: 3px solid var(--kr-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}