/* ============================================================================
   Yannik OS — Design Tokens (Single Source of Truth) · Identität „Night Desk"
   ----------------------------------------------------------------------------
   Section A: canonical --os-* tokens. The ONLY place hex/raw values live.
   Section B held the compatibility aliases (--bg, --blue, --life-*, --fin-*,
   --shell-*). It was deleted on 06.09.2026 with the Night Desk migration:
   every consumer now reads --os-* directly, so the aliases had none left.
   See docs/design.md for intent and usage.
   ============================================================================ */

/* ── Section A · Canonical tokens ─────────────────────────────────────────── */
:root {
  /* Surfaces (warm obsidian ramp: page → recessed → panel → raised) */
  --os-bg:        #0d0c0f;
  --os-surface-1: #121116;
  --os-surface-2: #17161b;
  --os-surface-3: #1e1d23;
  --os-overlay:   rgba(9, 8, 11, .62);

  /* Chrome material — vibrancy for app chrome ONLY (sidebar, sticky bars, modals) */
  --os-material-chrome: rgba(18, 17, 22, .72);
  --os-material-modal:  rgba(23, 22, 27, .80);
  --os-blur:            saturate(180%) blur(20px);

  /* Lines (paper-alpha, replaces the many legacy grays) */
  --os-line-soft:   rgba(243, 240, 232, .07);
  --os-line:        rgba(243, 240, 232, .105);
  --os-line-strong: rgba(243, 240, 232, .16);

  /* Text (warm paper ramp) */
  --os-text:       #f3f0e8;
  --os-text-dim:   #a9a6ae;
  --os-text-muted: #8f8b94;

  /* The one accent — signal gold. Active state, focus, signature instrument
     ONLY. Never as a fill, never decorative. */
  --os-signal: #d9a441;

  /* Semantic — strictly state */
  --os-blue:   #38bdf8;   /* info, links, focus-visible ring */
  --os-green:  #32d583;   /* success */
  --os-amber:  #f0b429;   /* warning — brighter than signal gold, always with icon/badge contour */
  --os-red:    #fb7185;   /* danger (coral) */
  --os-cyan:   #22d3ee;   /* chart series only */
  --os-orchid: #c084fc;   /* secondary decorative, life-ledger only */

  /* Category accents (life areas / companies) */
  --os-cat-hsd:       #e30613;              /* external brand red — keep */
  --os-cat-csa:       var(--os-blue);
  --os-cat-ki:        var(--os-signal);
  --os-cat-invest:    var(--os-amber);
  --os-cat-allgemein: var(--os-text-dim);

  /* Type families — one family, two voices: Plex Sans for UI and display,
     Plex Mono for data and the statusline signature */
  --os-font-ui:      'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --os-font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --os-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — the ONLY font sizes allowed (px by design, non-fluid) */
  --os-text-xs:      11px;   /* captions, badges, table secondary */
  --os-text-sm:      12px;   /* secondary UI, kickers */
  --os-text-base:    13px;   /* body / UI default */
  --os-text-md:      14px;   /* forms, emphasized body */
  --os-text-lg:      16px;   /* section titles, card titles */
  --os-text-xl:      20px;   /* page-lead, metric values small */
  --os-text-2xl:     26px;   /* metric values, view titles */
  --os-text-display: 34px;   /* display headlines (tracking -0.03em) */

  /* Spacing — 4px base */
  --os-s1: 4px;  --os-s2: 8px;  --os-s3: 12px; --os-s4: 16px; --os-s5: 20px;
  --os-s6: 24px; --os-s7: 32px; --os-s8: 40px; --os-s9: 56px;

  /* Radius — rounded language, 6/10/16/20 */
  --os-r-sm:   6px;    /* badges, inputs, small buttons */
  --os-r-md:   10px;   /* buttons, tiles, table wrappers */
  --os-r-lg:   16px;   /* cards, panels */
  --os-r-xl:   20px;   /* modals, sheets */
  --os-r-full: 999px;

  /* Shadows — black-only elevation, deliberately flat */
  --os-shadow-1: 0 1px 2px rgba(0, 0, 0, .16);
  --os-shadow-2: 0 8px 28px rgba(0, 0, 0, .34);
  --os-shadow-3: 0 28px 80px rgba(0, 0, 0, .44);

  /* z-index scale */
  --os-z-sticky:   100;
  --os-z-nav:      300;
  --os-z-dropdown: 400;
  --os-z-drawer:   800;
  --os-z-modal:    900;
  --os-z-toast:    1000;

  /* Motion — state only, ease-out */
  --os-t-fast: 130ms;
  --os-t-base: 180ms;
  --os-t-slow: 240ms;
  --os-ease:   cubic-bezier(.2, 0, 0, 1);

  --os-sidebar-w: 292px;
}

/* ── Global accessibility baseline ──────────────────────────────────────────
   Universal reduced-motion guard. Lives here (not in a component file) because
   it must win over EVERY component transition/animation — that requires
   !important, which is banned from base.css/shell.css by design rule. This is
   the single documented exception. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}