/* ==========================================================================
   Sooich — Design Tokens
   Dark base + gold accent. Single source of truth for color/space/type.
   ========================================================================== */

:root {
  /* ---- Surfaces ---- */
  --bg: #0d0d0f;
  --bg-elev: #121214;
  --surface: #1a1a1d;
  --surface-2: #1e1e22;
  --surface-3: #26262b;
  --border: #2a2a2e;
  --border-strong: #3a3a41;
  --body-bg: #08080a;
  --nav-bg: rgba(18, 18, 20, 0.92);
  --sticky-bg: rgba(18, 18, 20, 0.94);
  --solid-control-bg: rgba(13, 13, 15, 0.6);

  /* ---- Brand gold ---- */
  --gold-1: #f5a623;
  --gold-2: #ffd447;
  --gold-soft: rgba(245, 166, 35, 0.14);
  --gold-softer: rgba(245, 166, 35, 0.07);
  --gold-ring: rgba(255, 212, 71, 0.35);
  --grad-gold: linear-gradient(135deg, #f5a623 0%, #ffd447 100%);
  --grad-gold-rev: linear-gradient(315deg, #f5a623 0%, #ffd447 100%);

  /* ---- Text ---- */
  --text: #ffffff;
  --text-2: #d4d4d8;
  --text-muted: #9a9a9e;
  --text-faint: #6b6b70;
  --on-gold: #17130a;

  /* ---- Status ---- */
  --danger: #e14c4c;
  --danger-soft: rgba(225, 76, 76, 0.12);
  --success: #3ecf8e;
  --success-soft: rgba(62, 207, 142, 0.12);
  --info: #5b9dff;
  --warn: #f0b429;
  --warn-soft: rgba(240, 180, 41, 0.12);

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ---- Spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  /* ---- Elevation (dark UI: glow, not drop shadow) ---- */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --glow-gold: 0 0 0 1px rgba(245, 166, 35, 0.35), 0 8px 28px rgba(245, 166, 35, 0.14);

  /* ---- Typography ---- */
  --font: "Estedad", "Vazirmatn", "Segoe UI", "Tahoma", system-ui, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 23px;
  --fs-3xl: 28px;
  --lh-tight: 1.35;
  --lh: 1.75;

  /* ---- Layout ---- */
  --shell-max: 430px;
  --nav-h: 66px;
  --header-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 340ms;

  /* ---- Z-index ---- */
  --z-nav: 40;
  --z-sticky: 30;
  --z-sheet: 60;
  --z-toast: 80;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5f1;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0eee8;
  --surface-3: #e5e2da;
  --border: #dedbd2;
  --border-strong: #c9c5bb;
  --body-bg: #e9e6de;
  --nav-bg: rgba(255, 255, 255, 0.92);
  --sticky-bg: rgba(255, 255, 255, 0.94);
  --solid-control-bg: rgba(25, 24, 21, 0.76);

  --text: #181714;
  --text-2: #3f3d38;
  --text-muted: #6f6c65;
  --text-faint: #99958b;
  --on-gold: #17130a;

  --gold-soft: rgba(197, 123, 0, 0.15);
  --gold-softer: rgba(197, 123, 0, 0.08);
  --gold-ring: rgba(197, 123, 0, 0.28);
  --sh-sm: 0 1px 3px rgba(42, 35, 20, 0.08);
  --sh-md: 0 8px 24px rgba(42, 35, 20, 0.12);
  --sh-lg: 0 16px 48px rgba(42, 35, 20, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}