/* phi-tokens.css — Auto-generated from phi-tokens.json
 * Version: 1.0.0 | Updated: 2026-03-22
 * DO NOT EDIT — run: node /opt/design-system/export-tokens.js
 * Source: /opt/dashboard/src/index.css
 */

:root {

  /* Space Scale (x-height × φ^step, fluid) */
  --space-xxs: clamp(0.3313rem, 0.328032rem + 0.01373vw, 0.35rem);
  --space-xs: clamp(0.5313rem, 0.525887rem + 0.022883vw, 0.5625rem);
  --space-s: clamp(0.675rem, 0.668564rem + 0.02746vw, 0.7125rem);
  --space-m: clamp(0.8625rem, 0.853919rem + 0.036613vw, 0.9125rem);
  --space-l: clamp(1.3938rem, 1.379805rem + 0.059497vw, 1.475rem);
  --space-xl: clamp(2.25rem, 2.227474rem + 0.09611vw, 2.3813rem);
  --space-xxl: clamp(3.6438rem, 3.60728rem + 0.155606vw, 3.8563rem);
  --space-xxxl: clamp(5.8938rem, 5.834754rem + 0.251716vw, 6.2375rem);

  /* Type Scale (viewport-relative, φ^½ steps) */
  --type-xxs: clamp(10px, 0.55vw, 14px);
  --type-xs: clamp(12px, 0.7vw, 17px);
  --type-s: clamp(14px, 0.89vw, 22px);
  --type-m: clamp(17px, 1.13vw, 28px);
  --type-l: clamp(20px, 1.44vw, 36px);
  --type-xl: clamp(24px, 1.83vw, 46px);
  --type-xxl: clamp(28px, 2.33vw, 60px);
  --type-xxxl: clamp(34px, 2.96vw, 76px);

  /* Radius Scale (= Space Scale, phi-derived) */
  --radius-xxs: clamp(0.3313rem, 0.328032rem + 0.01373vw, 0.35rem);
  --radius-xs: clamp(0.5313rem, 0.525887rem + 0.022883vw, 0.5625rem);
  --radius-s: clamp(0.675rem, 0.668564rem + 0.02746vw, 0.7125rem);
  --radius-m: clamp(0.8625rem, 0.853919rem + 0.036613vw, 0.9125rem);
  --radius-l: clamp(1.3938rem, 1.379805rem + 0.059497vw, 1.475rem);
  --radius-xl: clamp(2.25rem, 2.227474rem + 0.09611vw, 2.3813rem);
  --radius-xxl: clamp(3.6438rem, 3.60728rem + 0.155606vw, 3.8563rem);
  --radius-xxxl: clamp(5.8938rem, 5.834754rem + 0.251716vw, 6.2375rem);
  --radius-inline: var(--radius-xs);
  --radius-input: var(--radius-s);
  --radius-button: var(--radius-m);
  --radius-card: var(--radius-m);
  --radius-dialog: var(--radius-l);
  --radius-sheet: var(--radius-xl);
  --radius-none: 0px;
  --radius-full: 9999px;

  /* ────────────────────────────────────────────────────────────────────
     Shape-Affordance Tokens (Heilige Regel 33 · 2026-05-14)
     Opt-in pro Komponente: single-line = pill, multi-line = rect.
     ──────────────────────────────────────────────────────────────────── */
  --shape-single: var(--radius-full);   /* einzeilige Items (Pill) */
  --shape-multi:  var(--radius-l);      /* mehrzeilige Container (Rounded-Rect) */

  /* On-Orange foreground (Heilige Regel 30b · 2026-05-14)
     Schrift + Icons auf orangem Hintergrund — IMMER weiß, NIEMALS schwarz. */
  --on-orange: #fff;

  /* Stroke / Border (type-xs × φ^step) */
  --stroke-s: calc(var(--type-xs) * 0.146);
  --stroke-m: calc(var(--type-xs) * 0.236);
  --stroke-l: calc(var(--type-xs) * 0.382);

  /* Icon Size (type-xs proportional) */
  --icon-xs: calc(var(--type-xs) * 0.882);
  --icon-s: var(--type-xs);
  --icon-m: calc(var(--type-xs) * 1.272);

  /* Slider Tokens */
  --slider-track-h: calc(var(--type-xs) * 0.236);  /* Track ~2.5px, phi-proportional */
  --slider-thumb: var(--space-m);                    /* Thumb = space-m, alle Slider gleich */

  /* Layout Heights */
  --toolbar-h: calc(var(--space-l) + var(--space-xxs) * 2);
  --header-h: calc(var(--toolbar-h) + var(--space-s) * 2);

  /* Layout Proportions (phi splits) */
  --layout-phi: 1.618;
  --layout-phi-inv: 0.618;
  --layout-full: 100%;
  --layout-half: 50%;
  --layout-third: 33.333%;
  --layout-quarter: 25%;
  --layout-major: 61.8%;
  --layout-minor: 38.2%;
  --layout-phi2: 72.36%;
  --layout-phi2-inv: 27.64%;

  /* Shadows (phi-scaled) */
  --shadow-xs: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-s: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-m: 0 4px 8px rgba(0,0,0,0.1);
  --shadow-l: 0 6px 12px rgba(0,0,0,0.12);
  --shadow-xl: 0 10px 20px rgba(0,0,0,0.15);
  --shadow-xxl: 0 17px 34px rgba(0,0,0,0.18);

  /* Duration (phi-scaled ms) */
  --duration-xs: 99ms;
  --duration-s: 161ms;
  --duration-m: 260ms;
  --duration-l: 421ms;
  --duration-xl: 681ms;
  --duration-xxl: 1101ms;

  /* Opacity (1/φⁿ) */
  --opacity-full: 1;
  --opacity-major: 0.618;
  --opacity-minor: 0.382;
  --opacity-subtle: 0.236;
  --opacity-faint: 0.146;
  --opacity-ghost: 0.09;

  /* Line Height */
  --leading-tight: 1.0;
  --leading-snug: 1.272;
  --leading-normal: 1.5;
  --leading-relaxed: 1.618;
  --leading-loose: 1.7;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.08em;

  /* Font Weight (Haffer) */
  --font-weight-normal: 382;
  --font-weight-bold: 618;

  /* Fixed Sizes (icons, avatars, UI elements) */
  --size-icon-xs: 12px;
  --size-icon-sm: 16px;
  --size-icon: 20px;
  --size-icon-lg: 24px;
  --size-icon-xl: 32px;
  --size-avatar-xs: 24px;
  --size-avatar-sm: 32px;
  --size-avatar: 36px;
  --size-avatar-lg: 40px;
  --size-avatar-xl: 48px;
  --size-indicator: 6px;
  --size-handle: 8px;
  --size-divider: 1px;
  --size-swatch: 20px;

  /* Touch Target Sizes (WCAG 2.2) */
  --touch-min: 24px;
  --touch-target: 44px;
  --touch-comfy: 48px;
}

/* HEILIGE REGEL: Alle interaktiven Elemente = fontWeight 618, Haffer */
button,
[role="button"],
select,
.phi-pill-toggle__item,
[class*="pill"],
[class*="btn"],
[class*="menu-item"],
[class*="nav-item"],
[class*="tab-trigger"],
[class*="toggle"] {
  font-weight: 618 !important;
  font-family: 'Haffer', sans-serif !important;
}