/* ─── Kahroba ecosystem · shared design tokens ───
   Single source of truth for every surface (main site, kahroba, library, mezaj, academy, account + admin).
   Edit main/shared/theme/*, then run `node shared/sync.mjs` (Docker build contexts cannot reach ../shared).

   Two layers:
     palette  — raw brand values (navy, amber, cream…). Use them for illustration-level styling only.
     semantic — what a colour is FOR (surface, fg, border, accent, success…). Components use these, and dark mode
                only has to remap this layer ([data-theme="dark"] on <html>). */
:root {
  /* palette */
  --cream: #f6f3ec; --paper: #fffdf9; --paper-2: #f9f6f0;
  --ink: #18233a; --ink-2: #3a4760; --muted: #677287; --hair: rgba(24, 35, 58, .09); --hair-2: rgba(24, 35, 58, .17);
  --amber: #d9962c; --amber-2: #b26f14; --amber-soft: #f6e8cc; --amber-glow: rgba(217, 150, 44, .32); --gold: #f3c46b;
  --navy: #1b2940; --navy-2: #253750; --navy-3: #0f1a2c;
  --free: #2f7d57; --sub: #3b6fc4; --buy: #c0672d; --danger: #b3312f;
  --hot: #d2603a; --cold: #5b8fd6; --wet: #3f9b8f; --dry: #c9a25a;

  /* semantic */
  color-scheme: light;
  --bg: var(--cream); --surface: var(--paper); --surface-2: var(--paper-2); --surface-sunk: #efebe2;
  --fg: var(--ink); --fg-muted: var(--ink-2); --fg-subtle: var(--muted);
  --border: var(--hair); --border-strong: var(--hair-2);
  --accent: var(--amber); --accent-strong: var(--amber-2); --accent-soft: var(--amber-soft); --on-accent: #fff;
  --success: var(--free); --success-soft: #e2f1e8;
  --warning: #a8670f; --warning-soft: #fbefd6;
  --error: var(--danger); --error-soft: #fbe5e4;
  --info: var(--sub); --info-soft: #e4ecfa;
  --focus: 0 0 0 3px rgba(217, 150, 44, .45);

  /* type: one family for both scripts (Vazirmatn has Latin glyphs), one scale */
  --font: "Vazirmatn", "Vazirmatn Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--font);
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --fs-xs: .78rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: clamp(2rem, 3.4vw, 2.75rem); --fs-hero: clamp(2.4rem, 5.2vw, 4.25rem);
  --lh: 1.75; --lh-tight: 1.25;

  /* space (4px grid), shape, depth, motion */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(24, 35, 58, .05), 0 2px 8px rgba(24, 35, 58, .04);
  --sh: 0 1px 3px rgba(24, 35, 58, .05), 0 12px 32px -12px rgba(24, 35, 58, .16);
  --sh-lg: 0 28px 70px -28px rgba(24, 35, 58, .42);
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: .2s;
  --side-w: 264px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1626; --surface: #152035; --surface-2: #1b2840; --surface-sunk: #0b1220;
  --fg: #eef2f8; --fg-muted: #b8c3d6; --fg-subtle: #8290a8;
  --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .17);
  --accent: #e6a63c; --accent-strong: #f0b857; --accent-soft: rgba(230, 166, 60, .15); --on-accent: #1f1304;
  --success: #4bcb87; --success-soft: rgba(75, 203, 135, .14);
  --warning: #e9a842; --warning-soft: rgba(233, 168, 66, .14);
  --error: #f06f6f; --error-soft: rgba(240, 111, 111, .14);
  --info: #79a3ff; --info-soft: rgba(121, 163, 255, .14);
  --sh: 0 1px 1px rgba(0, 0, 0, .25), 0 14px 34px -18px rgba(0, 0, 0, .6);
  --sh-lg: 0 14px 44px -10px rgba(0, 0, 0, .7);
}