/* ==========================================================================
   KUTAY OS — Design tokens
   Single source of truth for color, type, spacing, radius, shadow, motion
   and breakpoint values. Every other stylesheet consumes these custom
   properties instead of hard-coding values, so the whole system can be
   retuned from one place.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Color: surfaces & text (dark, default) ---- */
  --bg: #080a0f;
  --panel: rgba(20, 22, 28, .74);
  --panel-2: rgba(12, 14, 18, .88);
  --glass: rgba(28, 30, 36, .58);
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .065);
  --text: #f4f5f7;
  --text-muted: #a8acb5;
  --text-dim: #727783;

  /* ---- Color: accent & status ---- */
  --accent: #ff8a3d;
  --accent-ink: #101217;
  --blue: #5ca8ff;
  --green: #5bd57b;
  --red: #ff5f57;
  --yellow: #ffbd2e;

  /* ---- Color: window traffic-light glyphs ---- */
  --ps-circle: #f7a2a2;
  --ps-square: #f4a2d7;
  --ps-cross: #94c5ff;

  /* ---- Elevation ---- */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .28);
  --shadow-md: 0 18px 52px rgba(0, 0, 0, .40);
  --shadow-lg: 0 26px 80px rgba(0, 0, 0, .48);
  --shadow-xl: 0 24px 100px rgba(0, 0, 0, .62);

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* ---- Chrome dimensions (mobile-first defaults, see media queries) ---- */
  --menu-h: 52px;
  --dock-h: 66px;
  --titlebar-h: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dock-reserve: calc(var(--dock-h) + 22px);

  /* ---- Chrome surfaces ---- */
  --menu-bg: rgba(8, 10, 14, .66);
  --dock-bg: rgba(22, 24, 30, .62);
  --window-bg: linear-gradient(160deg, rgba(31, 34, 42, .95), rgba(12, 15, 20, .96));
  --hover: rgba(255, 255, 255, .07);
  --hover-strong: rgba(255, 255, 255, .13);
  --line-strong: rgba(255, 255, 255, .28);

  /* ---- Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-root: 14px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: .12s;
  --dur-base: .18s;
  --dur-slow: .32s;

  /* ---- Z-index scale ---- */
  --z-desktop: 1;
  --z-icons: 4;
  --z-window: 30;
  --z-window-active: 40;
  --z-dock: 60;
  --z-menu: 70;
  --z-task-tray: 80;
  --z-context-menu: 120;
  --z-dialog: 150;
  --z-toast: 160;
  --z-intro: 200;
}

/* ---- Light theme override (data-theme="light" on <html>) ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1ee;
  --panel: rgba(255, 255, 255, .80);
  --panel-2: rgba(255, 255, 255, .92);
  --glass: rgba(255, 255, 255, .66);
  --line: rgba(17, 20, 26, .14);
  --line-2: rgba(17, 20, 26, .075);
  --text: #14171d;
  --text-muted: #565c66;
  --text-dim: #7d838d;
  --accent: #c85a12;
  --blue: #2f6fd0;
  --green: #2f9e52;
  --shadow-lg: 0 22px 60px rgba(30, 26, 22, .16);
  --menu-bg: rgba(250, 248, 244, .74);
  --dock-bg: rgba(255, 253, 249, .66);
  --window-bg: linear-gradient(160deg, rgba(255, 254, 251, .96), rgba(244, 241, 236, .97));
  --hover: rgba(17, 20, 26, .06);
  --hover-strong: rgba(17, 20, 26, .11);
  --line-strong: rgba(17, 20, 26, .24);
}

/* ---- Chrome dimensions scale up once there's room ---- */
@media (min-width: 601px) {
  :root { --menu-h: 48px; --titlebar-h: 52px; --dock-h: calc(32px + 46px * var(--dock-scale, 1)); }
}

/* ---- Reduced motion: neutralize the whole motion system in one place ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur-base: 0s; --dur-slow: 0s; }
}