/* ═══════════════════════════════════════════════
   HOCHRUNTER OS — Design Tokens (kanonische Quelle)
   Alle CSS Custom Properties werden hier definiert.
   Keine Selektoren, keine Regeln — nur Variablen.
   ═══════════════════════════════════════════════ */

:root {

  /* ── 8px Spacing Scale ───────────────────────────────────────── */
  /* EINZIGE Quelle für alle Padding / Margin / Gap Werte.         */
  /* Nie 14px, 18px, 22px, 34px — immer von hier.                  */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* ── Typography — Size ──────────────────────────────────────── */
  --text-xs:   11px;   /* Labels, Tags, Kapitel-Überschriften */
  --text-sm:   13px;   /* Secondary, Filter, Chips */
  --text-base: 14px;   /* Fließtext, Table-Zellen */
  --text-md:   15px;   /* Karten-Körpertext */
  --text-lg:   17px;   /* Subtitle, Section-Titel */
  --text-xl:   20px;   /* Card-Headline */
  --text-2xl:  24px;   /* Page-Section */
  --text-3xl:  30px;   /* KPI-Zahl klein */
  --text-4xl:  36px;   /* Page-Titel */
  --text-5xl:  48px;   /* Hero-Zahl */
  --text-6xl:  64px;   /* Dashboard-Hero */

  /* ── Typography — Weight ───────────────────────────────────── */
  /* Apple-Regel: niemals alles 700. Bewusste Abstufung.           */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;
  --fw-ultra:     950;

  /* ── Typography — Line Height ───────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Typography — Letter Spacing ────────────────────────────── */
  --tracking-tighter: -.055em;  /* Hero-Zahlen */
  --tracking-tight:   -.04em;   /* Titel */
  --tracking-normal:  0;
  --tracking-wide:    .03em;
  --tracking-wider:   .06em;    /* Label Caps */
  --tracking-widest:  .1em;     /* Section Caps */

  /* ── Surface Layers (3 Tiefenstufen) ──────────────────────── */
  /* Von hell nach dunkel: float → page. Niemals ad-hoc Weißwerte. */
  --surface-float: #ffffff;      /* Modal, Dropdown, schwebend */
  --surface-card:  #ffffff;      /* Karte auf Panel */
  --surface-panel: #f8fafc;      /* Panel-Hintergrund, Listencontainer */
  --surface-page:  #f3f4f6;      /* Seitenhintergrund */
  --surface-inset: #eef0f3;      /* eingetieft, Sidebar */

  /* ── Brand Color — eine Farbe ──────────────────────────────── */
  /* Alle anderen Farben sind Status-Farben. Nicht dekorativ.      */
  --brand:          #0fa968;
  --brand-hover:    #0d935a;
  --brand-dim:      rgba(15,169,104,.07);
  --brand-border:   rgba(15,169,104,.22);
  --brand-shadow:   rgba(15,169,104,.18);
  --brand-glow:     rgba(15,169,104,.28);

  /* ── Accent (Alias für --brand — Rückwärtskompatibilität) ───── */
  --accent:      var(--brand);
  --accent-lt:   var(--brand-dim);
  --accent-md:   rgba(15,169,104,.14);
  --accent-soft: var(--brand-dim);
  --accent-bd:   var(--brand-border);

  /* ── Orange (Zusätzlicher Accent für Highlights/CTAs) ───────── */
  --orange:         #ff7a00;
  --orange-hover:   #e06b00;
  --orange-dim:     rgba(255,122,0,.07);
  --orange-border:  rgba(255,122,0,.22);

  /* ── Zinc Neutrals ──────────────────────────────────────────── */
  --z-50:   #fafafa;
  --z-100:  #f4f4f5;
  --z-200:  #e4e4e7;
  --z-300:  #d4d4d8;
  --z-400:  #a1a1aa;
  --z-500:  #71717a;
  --z-600:  #52525b;
  --z-700:  #3f3f46;
  --z-800:  #27272a;
  --z-900:  #18181b;
  --z-950:  #09090b;

  /* ── Blue Scale ─────────────────────────────────────────────── */
  --b-50:   #eff6ff;
  --b-100:  #dbeafe;
  --b-200:  #bfdbfe;
  --b-300:  #93c5fd;
  --b-400:  #60a5fa;
  --b-500:  #3b82f6;
  --b-600:  #2563eb;
  --b-700:  #1d4ed8;
  --b-800:  #1e40af;
  --b-900:  #1e3a8a;

  /* ── Semantic Status — NUR für kritische Systemzustände ─────── */
  --ok:      #16a34a;   /* Erfolg */
  --ok-bg:   #f0fdf4;
  --ok-bd:   #bbf7d0;
  --err:     #dc2626;   /* Fehler / Kritisch */
  --err-bg:  #fef2f2;
  --err-bd:  #fecaca;
  --warn:    #d97706;   /* Warnung / Ausstehend */
  --warn-bg: #fffbeb;
  --warn-bd: #fde68a;
  --info:    var(--z-700);
  --info-bg: var(--z-50);
  --info-bd: var(--z-200);

  /* ── Legacy Color Aliases (nicht neu verwenden) ─────────────── */
  --blue:     var(--z-900);
  --blue-lt:  var(--z-50);
  --green:    var(--ok);
  --green-lt: var(--ok-bg);
  --green-bd: var(--ok-bd);
  --red:      var(--err);
  --red-lt:   var(--err-bg);
  --red-bd:   var(--err-bd);
  --amber:    var(--warn);
  --amber-lt: var(--warn-bg);
  --amber-bd: var(--warn-bd);

  /* ── Surface Legacy Aliases ─────────────────────────────────── */
  --bg:       var(--surface-page);
  --card:     var(--surface-card);
  --line:     rgba(0,0,0,.08);
  --line-lt:  rgba(0,0,0,.04);
  --border:   var(--line);
  --ink:      var(--z-950);
  --sub:      var(--z-700);
  --muted:    var(--z-500);

  /* ── Border Radius ──────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r:      8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-3xl:  28px;
  --r-full: 9999px;

  /* ── Shell Layout / Icon Sizes ───────────────────────────────── */
  --shell-gutter: clamp(22px, 3.6vw, 72px);
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;

  /* ── Product Palette (Shell / Command Search) ───────────────── */
  --product-ink: #0b0d0c;
  --product-ink-soft: #353a37;
  --product-muted: #747b76;
  --product-hero: #f0f1ec;
  --product-paper: #ffffff;
  --product-soft: #f7f8f5;
  --product-line: rgba(11, 13, 12, 0.09);
  --product-line-strong: rgba(11, 13, 12, 0.16);
  --product-primary: #0f766e;
  --product-primary-hover: #0b625c;
  --product-primary-soft: #e8f2f0;
  --product-warning: #995a12;
  --product-danger: #b42318;
  --product-success: #15704a;

  /* ── Shadow Scale (6 Ebenen) ────────────────────────────────── */
  /* sh-xs: barely visible, sh-xl: dramatisch schwebend           */
  --sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --sh-sm: 0 2px 6px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --sh:    0 4px 14px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04);
  --sh-md: 0 8px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);
  --sh-lg: 0 18px 50px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.05);
  --sh-xl: 0 32px 80px rgba(15,23,42,.14), 0 8px 24px rgba(15,23,42,.07);

  /* ── Layout ─────────────────────────────────────────────────── */
  /* Tatsaechliche gerenderte Werte (06-art-director.css "APP-SHELL 2026"
     gewinnt seit langem mit !important gegen app.css - --sw/--th waren
     bislang tote Tokens, die nicht mehr stimmten). */
  --sw: 248px;            /* Sidebar-Breite bei Hover-Expand (>=1200px) */
  --sw-collapsed: 72px;   /* Sidebar-Breite eingeklappt */
  --th: 64px;             /* Topbar-Hoehe */

  /* ── Premium-Shell-Tokens (Alias auf bestehende Werte, keine Dopplung) ── */
  --color-primary:       var(--product-primary);
  --color-primary-hover: var(--product-primary-hover);
  --color-primary-soft:  var(--product-primary-soft);
  --color-primary-muted: #dff2ef;
  --color-bg:            #f5f6f2;
  --color-surface:       var(--surface-card);
  --color-surface-soft:  var(--surface-panel);
  --color-text:          var(--ink);
  --color-text-secondary: var(--sub);
  --color-text-muted:    var(--muted);
  --color-border:        var(--line);
  --color-border-soft:   var(--line-lt);
  --color-warning:       var(--warn);
  --color-warning-soft:  var(--warn-bg);
  --color-danger:        var(--err);
  --color-danger-soft:   var(--err-bg);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --shadow-soft:  var(--sh-sm);
  --shadow-hover: var(--sh-md);

  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-5: var(--sp-6);
  --space-6: var(--sp-8);
  --space-7: var(--sp-12);
  --space-8: var(--sp-16);
  --space-9: 80px;

  --topbar-height:  var(--th);
  --sidebar-width:  var(--sw);

  --transition-fast:   var(--tr-fast);
  --transition-normal: var(--tr);

  /* ── Motion ─────────────────────────────────────────────────── */
  /* Easing-Kurven nach physikalischen Prinzipien.                */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);       /* standard */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);         /* bidirektional */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);    /* federnder Überschwung */

  --dur-instant: 60ms;
  --dur-fast:    100ms;
  --dur:         160ms;
  --dur-slow:    260ms;
  --dur-xslow:   400ms;

  /* Legacy Transition Aliases */
  --tr-fast: var(--dur-fast) var(--ease-out);
  --tr:      var(--dur)      var(--ease-out);
  --tr-slow: var(--dur-slow) var(--ease-out);
}