:root {
  /* Default: dark jade atelier */
  --bg: #0a1118;
  --bg-elevated: #121a22;
  --bg-deep: #18222c;
  --surface: #151e28;
  --surface-glass: rgba(18, 26, 34, 0.78);
  --text: #eef3f7;
  --text-muted: #8b9aab;
  --accent: #2ec4b0;
  --accent-hover: #45d4c0;
  --accent-deep: #1a9e8c;
  --accent-soft: rgba(46, 196, 176, 0.14);
  --accent-glow: rgba(46, 196, 176, 0.28);
  --warm: #f0b15c;
  --warm-soft: rgba(240, 177, 92, 0.14);
  --ink-hero: #f5f8fb;
  --border: rgba(238, 243, 247, 0.08);
  --border-strong: rgba(238, 243, 247, 0.16);
  --overlay: rgba(4, 8, 14, 0.62);
  --danger: #d64545;
  --success: #2f8f6b;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 22px 56px rgba(46, 196, 176, 0.12);

  --font: "Vazirmatn", Tahoma, sans-serif;
  --font-brand: "Vazirmatn", Tahoma, sans-serif;
  --font-display: "Vazirmatn", Tahoma, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 104px;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-med: 420ms;
  --dur-slow: 780ms;

  --header-h: 104px;
  --max-w: 1120px;
  --max-w-wide: 1320px;

  --display: clamp(2.6rem, 7vw, 5.25rem);
  --h1: clamp(1.85rem, 3.6vw, 2.75rem);
  --h2: clamp(1.45rem, 2.6vw, 2rem);
  --h3: 1.15rem;
  --body-lg: 1.0625rem;
  --body: 0.95rem;
  --body-sm: 0.825rem;
  --caption: 0.75rem;
  --label: 0.72rem;
  --button: 0.875rem;

  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #eef2f6;
  --bg-elevated: #e3eaf1;
  --bg-deep: #d5dee8;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --text: #0c1219;
  --text-muted: #5c6b7a;
  --accent: #0d8f7b;
  --accent-hover: #0a7464;
  --accent-deep: #06685a;
  --accent-soft: rgba(13, 143, 123, 0.12);
  --accent-glow: rgba(13, 143, 123, 0.28);
  --warm: #f0a04b;
  --warm-soft: rgba(240, 160, 75, 0.16);
  --ink-hero: #f5f8fb;
  --border: rgba(12, 18, 25, 0.08);
  --border-strong: rgba(12, 18, 25, 0.16);
  --overlay: rgba(8, 14, 22, 0.55);
  --shadow: 0 18px 48px rgba(12, 18, 25, 0.08);
  --shadow-lift: 0 22px 56px rgba(13, 143, 123, 0.14);
  color-scheme: light;
}

@media (max-width: 768px) {
  :root {
    --header-h: 92px;
  }
}