/*
  Aravira design tokens — the single source of truth for color, type, space and motion.
  Components and pages must only reference these variables; never hard-code colors.
  Light values live on :root, dark values on [data-theme="dark"] (set by js/theme.js).
*/
:root {
  color-scheme: light;

  /* Surfaces */
  /* Warm linen instead of pure white: easier on the eyes, still bright */
  --bg: #f0eee6;
  --surface: #faf8f3;
  --surface-2: #efece3;
  --surface-3: #e5e1d6;
  --overlay: rgb(17 24 20 / .5);

  /* Lines */
  --border: #e0dbcf;
  --border-strong: #cbc5b6;

  /* Text (all ≥ 4.5:1 on --surface and --bg) */
  --text: #1f2a24;
  --text-2: #4a564f;
  --text-3: #5f6a63;

  /* Brand: deep olive for actions, muted brass for small accents */
  --primary: #2e4a3b;
  --primary-hover: #243c2f;
  --on-primary: #ffffff;
  --primary-soft: #e5ede6;
  --primary-soft-text: #284334;
  --accent: #a3844a;
  --accent-text: #7a5f2d;
  --accent-soft: #f4ecdb;
  --star: #c48a22;

  /* Status: each has its own background and foreground */
  --success-bg: #e2efe4; --success-text: #2c5838;
  --warning-bg: #f6ecd5; --warning-text: #6b501d;
  --danger-bg: #f8e4e1;  --danger-text: #8d3a32;  --danger: #b5483d;
  --info-bg: #e2eaf0;    --info-text: #39566a;

  --focus: #8a6d33;

  /* Decorative */
  --glow-gold: rgb(163 132 74 / .25);
  --glow-mint: rgb(46 74 59 / .14);
  --brand-gradient: linear-gradient(135deg, #3d6150 0%, #2e4a3b 55%, #22392d 100%);
  --text-gradient: linear-gradient(100deg, #8a6a2e 0%, #a3844a 45%, #2e6b52 100%);
  --aurora-1: rgb(46 107 82 / .16);
  --aurora-2: rgb(214 181 108 / .22);
  --aurora-3: rgb(120 170 220 / .12);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(60 48 24 / .06), 0 1px 3px rgb(60 48 24 / .04);
  --shadow-md: 0 6px 16px rgb(60 48 24 / .07), 0 2px 4px rgb(60 48 24 / .04);
  --shadow-lg: 0 20px 50px rgb(60 48 24 / .12), 0 4px 12px rgb(60 48 24 / .05);

  /* Type */
  --font: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2.125rem;
  --text-display: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);

  /* Space (4px grid) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 68px;
  --tabbar-h: 64px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: 120ms;
  --normal: 200ms;

  /* Layers */
  --z-sticky: 100;
  --z-header: 200;
  --z-tabbar: 300;
  --z-overlay: 1000;
  --z-toast: 1100;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* "Tehran night": deep emerald-black with warm gold light */
  --bg: #0a100d;
  --surface: #121a16;
  --surface-2: #19231e;
  --surface-3: #223029;
  --overlay: rgb(2 6 4 / .66);

  --border: rgb(214 228 218 / .08);
  --border-strong: rgb(214 228 218 / .16);

  --text: #eef2ec;
  --text-2: #b9c4bb;
  --text-3: #8f9c93;

  --primary: #e2c98a;
  --primary-hover: #efd9a2;
  --on-primary: #16120a;
  --primary-soft: rgb(110 231 183 / .1);
  --primary-soft-text: #a7f0cf;
  --accent: #e2c98a;
  --accent-text: #e9d29c;
  --accent-soft: rgb(226 201 138 / .12);
  --star: #f3c35a;

  --success-bg: rgb(52 211 153 / .14); --success-text: #8ef0c3;
  --warning-bg: rgb(251 191 36 / .14); --warning-text: #f8d48a;
  --danger-bg: rgb(248 113 113 / .14);  --danger-text: #fcb1a8;  --danger: #f87171;
  --info-bg: rgb(96 165 250 / .14);    --info-text: #b3d1f8;

  --focus: #efd9a2;

  --glow-gold: rgb(226 201 138 / .35);
  --glow-mint: rgb(110 231 183 / .22);
  --brand-gradient: linear-gradient(135deg, #f1dca6 0%, #d6b56c 45%, #b98d3e 100%);
  --text-gradient: linear-gradient(100deg, #f6e3b0 0%, #e2c98a 40%, #8ff0c8 100%);
  --aurora-1: rgb(16 185 129 / .30);
  --aurora-2: rgb(226 201 138 / .20);
  --aurora-3: rgb(56 120 255 / .16);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-md: 0 8px 24px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .03);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .04);
}