/* =============================================================================
   WRM LIVING STUDIO OS: DESIGN TOKENS
   Calibrated Neutrals, OKLCH Strategy, Liquid Glass Parameters
   ============================================================================= */

:root {
  /* Typography Scale (DESIGN.md) */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Calibrated Slate / Obsidian Neutrals (Strictly no pure black or pure white) */
  --bg-deep: #0b0d11;
  --bg-surface: rgba(18, 21, 28, 0.75);
  --bg-surface-elevated: rgba(24, 28, 38, 0.85);
  --bg-card: rgba(22, 26, 36, 0.72);
  --bg-card-hover: rgba(30, 36, 48, 0.82);

  --border-glass: rgba(255, 255, 255, 0.08);
  --border-glass-highlight: rgba(255, 255, 255, 0.16);
  --border-glass-subtle: rgba(255, 255, 255, 0.04);
  --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);

  /* Foreground Contrast Veil (Guarantees text contrast over dynamic canvas) */
  --veil-bg: rgba(11, 13, 17, 0.55);
  --veil-blur: blur(16px);

  /* Typography Inks */
  --ink-primary: #f8fafc;
  --ink-secondary: #94a3b8;
  --ink-dim: #64748b;
  --ink-muted: #475569;

  /* Strategic Accents */
  --accent-mercury: #e2e8f0;
  --accent-cyan: #38bdf8;
  --accent-emerald: #34d399;
  --accent-amber: #fbbf24;
  --accent-rose: #fb7185;

  /* Content Signal Badges */
  --signal-made-bg: rgba(52, 211, 153, 0.12);
  --signal-made-ink: #34d399;
  --signal-made-border: rgba(52, 211, 153, 0.28);

  --signal-useful-bg: rgba(56, 189, 248, 0.12);
  --signal-useful-ink: #38bdf8;
  --signal-useful-border: rgba(56, 189, 248, 0.28);

  --signal-frontier-bg: rgba(226, 232, 240, 0.12);
  --signal-frontier-ink: #e2e8f0;
  --signal-frontier-border: rgba(226, 232, 240, 0.28);

  --signal-experiment-bg: rgba(251, 191, 36, 0.12);
  --signal-experiment-ink: #fbbf24;
  --signal-experiment-border: rgba(251, 191, 36, 0.28);

  --signal-atmo-bg: rgba(168, 85, 247, 0.12);
  --signal-atmo-ink: #c084fc;
  --signal-atmo-border: rgba(168, 85, 247, 0.28);

  /* Motion Curves (DESIGN.md) */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Z-Index Hierarchy */
  --z-wallpaper: 1;
  --z-veil: 5;
  --z-desktop: 10;
  --z-icons: 15;
  --z-windows: 20;
  --z-marquee: 50;
  --z-dock: 900;
  --z-menu: 950;
  --z-crt: 99999;
}