/* =============================================================================
   Design tokens — the single source of truth for color, type, space, motion.
   Every other stylesheet consumes these variables and never hardcodes a value.

   Theming contract: the complete LIGHT palette is defined on bare :root, so a
   document with no JS and no data-theme still renders correctly. Dark mode
   only *overrides* tokens, in two places that must stay in sync:
     1. @media (prefers-color-scheme: dark) — guarded by :not([data-theme=light])
        so an explicit light choice always wins over the OS.
     2. :root[data-theme="dark"] — an explicit dark choice wins over the OS.
   ========================================================================== */

/* One variable font file covers every weight the UI uses (400–800).
   WOFF2 first — it is less than half the size of the TTF, which is kept only
   as a fallback for browsers that predate it. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2'),
       url('../assets/fonts/Vazirmatn-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand ------------------------------------------------------------- */
  --brand-50:  #eef0ff;
  --brand-100: #e0e3ff;
  --brand-200: #c4c9ff;
  --brand-300: #a3a6fb;
  --brand-400: #7d7bf0;
  --brand-500: #5b4be1;
  --brand-600: #4a38cf;
  --brand-700: #3c2caa;
  --brand-800: #2f2385;
  --brand-900: #241b66;

  --teal-400: #2dd4bf;
  --teal-500: #00c2a8;
  --teal-600: #009e8a;
  --amber-500: #f59e0b;
  --orange-500: #ff8a3d;
  --rose-500: #e5484d;
  --rose-600: #cc3b40;
  --green-500: #12a594;
  --green-600: #0d8579;

  /* --- Semantic surfaces (light) ----------------------------------------- */
  --bg: #f5f6fb;
  --bg-tint-1: rgb(91 75 225 / 0.10);   /* aurora blob A */
  --bg-tint-2: rgb(0 194 168 / 0.10);   /* aurora blob B */
  --bg-tint-3: rgb(255 138 61 / 0.07);  /* aurora blob C */

  --surface: #ffffff;
  --surface-2: #fbfbfe;
  --surface-3: #f1f2f8;
  --surface-inset: #f6f7fb;
  --surface-glass: rgb(255 255 255 / 0.78);
  --overlay: rgb(16 18 27 / 0.42);

  --border: #e5e7f0;
  --border-strong: #d3d6e4;
  --divider: #edeef5;

  /* --- Text -------------------------------------------------------------- */
  --text: #15161d;
  --text-muted: #5c6076;
  /* Kept dark enough to clear 4.5:1 against --bg at the small sizes it is
     actually used at (.xs hints, timestamps). */
  --text-subtle: #6c7087;
  /* Text printed *on* a filled accent. In light mode the accents are dark, so
     this is white; the dark palette lightens every accent, which flips these
     to near-black — see the overrides below. Anything sitting on --primary /
     --danger / --success must use these instead of a literal #fff, or it
     fails contrast the moment the theme changes. */
  --text-on-brand: #ffffff;
  --text-on-danger: #ffffff;
  --text-on-success: #ffffff;

  /* --- Roles ------------------------------------------------------------- */
  --primary: var(--brand-500);
  --primary-hover: var(--brand-600);
  --primary-soft: var(--brand-50);
  --primary-soft-text: var(--brand-700);
  --primary-ring: rgb(91 75 225 / 0.28);

  --success: var(--green-600);
  --success-soft: #dcf6f0;
  --success-soft-text: #0a6459;

  --warning: #b4700a;
  --warning-soft: #fdf0d5;
  --warning-soft-text: #8a5406;

  --danger: var(--rose-500);
  --danger-hover: var(--rose-600);
  --danger-soft: #fdeaea;
  --danger-soft-text: #a72b2f;

  --info: #2563eb;
  --info-soft: #e5edff;
  --info-soft-text: #1d4ed8;

  --neutral-soft: var(--surface-3);
  --neutral-soft-text: var(--text-muted);

  /* --- Elevation --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgb(20 22 38 / 0.05);
  --shadow-sm: 0 2px 6px rgb(20 22 38 / 0.06), 0 1px 2px rgb(20 22 38 / 0.04);
  --shadow-md: 0 8px 24px rgb(20 22 38 / 0.08), 0 2px 6px rgb(20 22 38 / 0.04);
  --shadow-lg: 0 24px 60px rgb(20 22 38 / 0.14), 0 6px 16px rgb(20 22 38 / 0.06);
  --shadow-brand: 0 10px 30px rgb(91 75 225 / 0.28);

  /* --- Geometry ---------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --shell-max: 1180px;
  --rail-w: 260px;
  --topbar-h: 64px;
  --tabbar-h: 66px;

  /* --- Type -------------------------------------------------------------- */
  --font: 'Vazirmatn', 'Segoe UI', system-ui, -apple-system, 'Noto Sans Arabic', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  --fs-display: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h1: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h2: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-h3: 1.125rem;
  --fs-body: 0.975rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.3;
  --lh-body: 1.75;

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* --- Dark palette: OS preference (unless the user explicitly chose light) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0c10;
    --bg-tint-1: rgb(125 123 240 / 0.16);
    --bg-tint-2: rgb(0 194 168 / 0.12);
    --bg-tint-3: rgb(255 138 61 / 0.08);

    --surface: #14161c;
    --surface-2: #171a21;
    --surface-3: #1e222b;
    --surface-inset: #101218;
    --surface-glass: rgb(20 22 28 / 0.78);
    --overlay: rgb(4 5 9 / 0.62);

    --border: #262a34;
    --border-strong: #343945;
    --divider: #21242d;

    --text: #eef0f6;
    --text-muted: #a2a8bd;
    --text-subtle: #868da3;
    --text-on-brand: #0b0c10;
    --text-on-danger: #2b0d0e;
    --text-on-success: #04211d;

    --primary: var(--brand-400);
    --primary-hover: #8f8df5;
    --primary-soft: rgb(125 123 240 / 0.16);
    --primary-soft-text: #b9b8ff;
    --primary-ring: rgb(125 123 240 / 0.4);

    --success: #2fd4b8;
    --success-soft: rgb(18 165 148 / 0.18);
    --success-soft-text: #6fe3cd;

    --warning: #f5b544;
    --warning-soft: rgb(245 158 11 / 0.16);
    --warning-soft-text: #f6c66d;

    --danger: #ff6b6e;
    --danger-hover: #ff8285;
    --danger-soft: rgb(229 72 77 / 0.18);
    --danger-soft-text: #ff9ea0;

    --info: #7aa2ff;
    --info-soft: rgb(37 99 235 / 0.2);
    --info-soft-text: #a9c2ff;

    --neutral-soft: var(--surface-3);
    --neutral-soft-text: var(--text-muted);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 2px 6px rgb(0 0 0 / 0.45);
    --shadow-md: 0 10px 28px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 28px 64px rgb(0 0 0 / 0.6);
    --shadow-brand: 0 10px 30px rgb(91 75 225 / 0.4);
  }
}

/* --- Dark palette: explicit user choice ----------------------------------- */
:root[data-theme="dark"] {
  --bg: #0b0c10;
  --bg-tint-1: rgb(125 123 240 / 0.16);
  --bg-tint-2: rgb(0 194 168 / 0.12);
  --bg-tint-3: rgb(255 138 61 / 0.08);

  --surface: #14161c;
  --surface-2: #171a21;
  --surface-3: #1e222b;
  --surface-inset: #101218;
  --surface-glass: rgb(20 22 28 / 0.78);
  --overlay: rgb(4 5 9 / 0.62);

  --border: #262a34;
  --border-strong: #343945;
  --divider: #21242d;

  --text: #eef0f6;
  --text-muted: #a2a8bd;
  --text-subtle: #868da3;
  --text-on-brand: #0b0c10;
  --text-on-danger: #2b0d0e;
  --text-on-success: #04211d;

  --primary: var(--brand-400);
  --primary-hover: #8f8df5;
  --primary-soft: rgb(125 123 240 / 0.16);
  --primary-soft-text: #b9b8ff;
  --primary-ring: rgb(125 123 240 / 0.4);

  --success: #2fd4b8;
  --success-soft: rgb(18 165 148 / 0.18);
  --success-soft-text: #6fe3cd;

  --warning: #f5b544;
  --warning-soft: rgb(245 158 11 / 0.16);
  --warning-soft-text: #f6c66d;

  --danger: #ff6b6e;
  --danger-hover: #ff8285;
  --danger-soft: rgb(229 72 77 / 0.18);
  --danger-soft-text: #ff9ea0;

  --info: #7aa2ff;
  --info-soft: rgb(37 99 235 / 0.2);
  --info-soft-text: #a9c2ff;

  --neutral-soft: var(--surface-3);
  --neutral-soft-text: var(--text-muted);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 2px 6px rgb(0 0 0 / 0.45);
  --shadow-md: 0 10px 28px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 28px 64px rgb(0 0 0 / 0.6);
  --shadow-brand: 0 10px 30px rgb(91 75 225 / 0.4);
}