/* ═══════════════════════════════════════════════════════════════════════════ */
/* DESIGN TOKENS — Single Source of Truth                                    */
/*                                                                           */
/* Every component MUST reference these tokens. No hardcoded values.         */
/* Brand overrides inject via --brand-* custom properties at runtime.        */
/* ═══════════════════════════════════════════════════════════════════════════ */
@layer tokens {
  :root {
    color-scheme: light;

    /* ─── Typography — Font Families ─────────────────────────────── */

    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
      Consolas, "DejaVu Sans Mono", monospace;
    /* ADR-205 Prio 4: editorial serif (system stack, no webfont/CDN). */
    --font-serif: "Iowan Old Style", Georgia, Cambria, "Times New Roman", Times, serif;

    /* ─── Typography — Font Weights ──────────────────────────────── */

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    900;

    /* ─── Typography — Font Size Scale ───────────────────────────── */
    /* MODULAR scale — alle Groessen sind Multiplier von --fs-base.  */
    /* Brand-Override setzt --fs-base, alle anderen skalieren mit.   */
    /* Consulting-Scale (McKinsey/BCG/Deloitte): Ratio ~1.2          */

    --fs-base:    1rem;                                      /* 16px */
    --fs-2xs:     calc(var(--fs-base) * 0.6875);             /* 11px */
    --fs-xs:      calc(var(--fs-base) * 0.75);               /* 12px */
    --fs-sm:      calc(var(--fs-base) * 0.875);              /* 14px */
    --fs-lg:      calc(var(--fs-base) * 1.125);              /* 18px */
    /* Mobile-Fix 2026-05-06: Min-Werte runter + vw-Multiplikatoren rauf,
       damit Hero-Texte auf <= 480px Viewport tatsaechlich scalen
       statt bei zu hohem Min stehen zu bleiben (vorher: 36px Min war
       fuer 320-375px-Mobile-Viewports zu gross → wrap-Ueberlauf). */
    --fs-xl:      clamp(calc(var(--fs-base) * 1.0),    2.5vw, calc(var(--fs-base) * 1.5));   /* 16-24 */
    --fs-2xl:     clamp(calc(var(--fs-base) * 1.125),  3.5vw, calc(var(--fs-base) * 2));     /* 18-32 */
    --fs-3xl:     clamp(calc(var(--fs-base) * 1.375),  5vw,   calc(var(--fs-base) * 2.5));   /* 22-40 */
    --fs-hero:    clamp(calc(var(--fs-base) * 1.5),    7vw,   calc(var(--fs-base) * 3.25));  /* 24-52 */
    --fs-display: clamp(calc(var(--fs-base) * 1.75),   8vw,   calc(var(--fs-base) * 4));     /* 28-64 */
    /* Phase-C UX-Ext: Supersized fuer Hero-Slider — plakativ, riesig. */
    --fs-super:   clamp(calc(var(--fs-base) * 2.0),   10vw,   calc(var(--fs-base) * 7));     /* 32-112 */

    /* ─── Typography — Line Heights ──────────────────────────────── */

    --lh-none:    1;
    --lh-tight:   1.05;
    --lh-snug:    1.2;
    --lh-normal:  1.4;
    --lh-relaxed: 1.65;
    --lh-loose:   1.8;

    /* ─── Spacing ────────────────────────────────────────────────── */
    /* 4px base grid, 9 steps. All layout uses these tokens.         */

    --space-1:  0.25rem;  /*   4px */
    --space-2:  0.5rem;   /*   8px */
    --space-3:  0.75rem;  /*  12px */
    --space-4:  1rem;     /*  16px */
    --space-5:  1.5rem;   /*  24px */
    --space-6:  2rem;     /*  32px */
    --space-7:  3rem;     /*  48px */
    --space-8:  4rem;     /*  64px */
    --space-9:  6rem;     /*  96px */

    /* Semantic aliases (section-level layout) */
    --space-s:  var(--space-2);  /*  8px */
    --space-m:  var(--space-5);  /* 24px */
    --space-l:  var(--space-8);  /* 64px */

    /* ─── Border Radius ──────────────────────────────────────────── */
    /* Brand-overridable via --brand-radius-* at runtime.            */

    --radius-none: 0;
    --radius-sm:   var(--brand-radius-sm, 0.375rem);  /* 6px */
    --radius-md:   var(--brand-radius, 0.75rem);      /* 12px */
    --radius-lg:   var(--brand-radius-lg, 1rem);      /* 16px */
    --radius-xl:   1.5rem;                            /* 24px */
    --radius-pill: 999px;
    --radius-full: 50%;

    /* ─── Shadows ────────────────────────────────────────────────── */

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04);

    /* ─── Transitions ────────────────────────────────────────────── */

    --ease-fast:    0.15s ease;
    --ease-default: 0.2s ease;
    --ease-slow:    0.3s ease;
    --ease-spring:  0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-Index Scale ──────────────────────────────────────────── */

    --z-base:     0;
    --z-above:    1;
    --z-dropdown: 10;
    --z-sticky:   20;
    --z-header:   100;
    --z-overlay:  200;
    --z-modal:    300;
    --z-toast:    400;

    /* ─── Layout ─────────────────────────────────────────────────── */

    --content-max: 72rem;     /* 1152px */
    --site-max:    1200px;
    --site-pad-x:  24px;

    /* ─── Semantic Color References ──────────────────────────────── */
    /* Resolved at runtime via 05_brand.css + brand-specific CSS.    */

    --app-bg:       #f3f5f8;
    --page-bg:      #ffffff;
    --page-border:  color-mix(in srgb, var(--border) 70%, transparent);

    --bg:               var(--color-bg);
    --text:             var(--color-text);
    --muted:            var(--color-muted);
    --border:           var(--color-border);
    --panel:            var(--color-panel);
    --panel-border:     var(--color-panel-border);
    --action:           var(--color-action);
    --action-2:         var(--color-action-2);
    --action-contrast:  var(--color-action-contrast);
    --focus-ring:       var(--color-focus);

    /* ═══ Cross-Brand Identitaets-Farben ═════════════════════════ */
    /* Globale Single-Source-of-Truth fuer Cross-Brand-Verweise.    */
    /* In jeder Brand verfuegbar — wenn Brand A auf Brand B         */
    /* verweist (Logo-Liste, Case-Study), wird hier referenziert.   */
    /* Kein Per-Brand-Override: Identitaetsfarben muessen ueberall  */
    /* identisch erscheinen.                                        */
    --brand-cross-efexcon-group:      #C8192E;
    --brand-cross-efexcon-group-dark: #0f182d;
    --brand-cross-efexcon-ag:         #2F4E6F;
    --brand-cross-kiinno-ag:          #2E6BFF;
    --brand-cross-sovaia:             #4CB4FF;

    /* ═══ Legacy Aliases ══════════════════════════════════════════ */
    /* Backward compat — will be removed once all consumers migrate */

    --fs-md:     var(--fs-base);
    --shadow-1:  var(--shadow-sm);
    --border-1:  1px;

    --s-2:  var(--space-2);
    --s-4:  var(--space-4);
    --s-6:  var(--space-5);
    --s-8:  var(--space-6);
    --s-10: 2.5rem;
    --s-12: var(--space-7);
    --s-14: 3.5rem;
    --s-16: var(--space-8);
    --s-24: var(--space-9);

    --r-6:  var(--radius-sm);
    --r-10: var(--radius-sm);
    --r-12: var(--radius-md);
    --r-16: var(--radius-md);
    --r-24: var(--radius-lg);

    /* ═══════════════════════════════════════════════════════════════ */
    /* ADR-205 Token-Erweiterung (ADR-009 Spike Prio 1–5)              */
    /* Additiv, brand-overridable. Speist Stufe-1-Praesentations-Spec. */
    /* ═══════════════════════════════════════════════════════════════ */

    /* ─── Prio 1: Letter-Spacing / Tracking Scale ────────────────── */
    --tracking-tighter: -0.04em;
    --tracking-tight:   -0.02em;
    --tracking-normal:   0em;
    --tracking-wide:     0.04em;
    --tracking-wider:    0.08em;
    --tracking-widest:   0.14em;

    /* ─── Prio 2: Semantic Status Colors ─────────────────────────── */
    /* Brand-neutral defaults; brand.css darf ueberschreiben.         */
    --color-success:   #1f8a5b;
    --color-warning:   #c2892a;
    --color-danger:    #cf4f36;
    --color-info:      #2b7a9e;
    --color-on-status: #ffffff;   /* Text auf gefuellter Status-Farbe */
    --color-success-bg: color-mix(in srgb, var(--color-success) 12%, transparent);
    --color-warning-bg: color-mix(in srgb, var(--color-warning) 14%, transparent);
    --color-danger-bg:  color-mix(in srgb, var(--color-danger) 12%, transparent);
    --color-info-bg:    color-mix(in srgb, var(--color-info) 12%, transparent);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger:  var(--color-danger);
    --info:    var(--color-info);

    /* ─── Prio 3: Sekundaerer / warmer Akzent (≠ --action) ───────── */
    --color-accent:          var(--brand-accent, #e08a3c);
    --color-accent-contrast: var(--brand-accent-contrast, #1a1204);
    --accent:          var(--color-accent);
    --accent-contrast: var(--color-accent-contrast);

    /* ─── Prio 5: Gradient-Token-Familie (Praesentation-als-Daten) ─ */
    --gradient-accent: linear-gradient(96deg, var(--brand-1, var(--color-action)), var(--brand-2, var(--color-action-2)));
    --gradient-warm:   linear-gradient(96deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 55%, #ffffff));
    --gradient-cool:   linear-gradient(180deg, var(--color-action), var(--color-action-2));
    --gradient-mesh:   radial-gradient(60% 80% at 20% 15%, color-mix(in srgb, var(--brand-1, var(--color-action)) 50%, transparent), transparent 60%),
                       radial-gradient(50% 60% at 85% 30%, color-mix(in srgb, var(--color-accent) 42%, transparent), transparent 60%),
                       var(--color-bg);
    --gradient-text:   linear-gradient(92deg, var(--color-text), var(--color-accent));

    /* ═══════════════════════════════════════════════════════════════ */
    /* ADR-205 Iteration 2 (Re-Spike: zweite, feinere Token-Welle)     */
    /* Additiv, brand-overridable. Schliesst warm-neutral / dark-surface */
    /* / inverse / measure / extrabold Lücken aus dem Stufe-1-Re-Spike. */
    /* ═══════════════════════════════════════════════════════════════ */

    /* ─── Warm-neutrale Palette (editoriale/warme Designs) ────────── */
    --color-paper:        var(--brand-paper, #faf7f2);   /* warmes Off-White */
    --color-ink:          var(--brand-ink, #22201c);     /* warme Tinte */
    --color-warm-muted:   var(--brand-warm-muted, #7a7266);
    --color-warm-border:  var(--brand-warm-border, #e4ddd0);
    --color-warm-panel:   var(--brand-warm-panel, #f5efe2);

    /* ─── Dunkle Surface + Inverse/On-Dark-Text ───────────────────── */
    --color-surface-dark:  var(--brand-surface-dark, #0e1b2c);
    --color-on-dark:       var(--brand-on-dark, #f8fafc);
    --color-on-dark-muted: var(--brand-on-dark-muted, #a9b6c8);
    --gradient-mesh-dark:  radial-gradient(60% 80% at 20% 15%, color-mix(in srgb, var(--brand-1, var(--color-action)) 45%, transparent), transparent 60%),
                           radial-gradient(50% 60% at 85% 30%, color-mix(in srgb, var(--color-accent) 35%, transparent), transparent 60%),
                           var(--color-surface-dark);

    /* ─── Extrabold-Zwischenstufe + Editorial-Lesebreite + shadow-none */
    --fw-extrabold:    800;
    --content-measure: 68ch;   /* editoriale Lesespalte (neben --content-max) */
    --shadow-none:     none;
  }

  html.dark {
    color-scheme: dark;
  }

  /* Responsive overrides for legacy aliases only — canonical tokens
     use clamp() and need no media-query overrides. */
  @media (max-width: 640px) {
    :root {
      --s-8:  1.5rem;
      --s-10: 2rem;
      --s-12: 2.5rem;
      --s-14: 3rem;
      --s-16: 3.5rem;
      --s-24: 4rem;
    }
  }
}