/* ============================================================
   بیمت با من — Premium Design System
   Colors & Typography Tokens
   ============================================================ */

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Vazirmatn-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
}

:root {
  /* === Brand ink — deep, refined navy-black ===================
     The original navy (#1a365d) is preserved as the "signature"
     mid-tone. We add an obsidian top end for premium depth and
     two slightly cooler mid-tones for layered surfaces. */
  --ink-950: #0A1428;   /* obsidian — splash, deep gradients */
  --ink-900: #0F1E3C;   /* card-on-dark */
  --ink-800: #14274C;   /* surface-on-dark */
  --ink-700: #1A365D;   /* signature navy (legacy --c-primary) */
  --ink-600: #2C4870;
  --ink-500: #3A5A85;

  /* === Emerald — the optimistic accent ======================== */
  --emerald-700: #155E3F;
  --emerald-600: #1A6B47;   /* legacy --c-accent-2 */
  --emerald-500: #2D9D6E;   /* legacy --c-accent (brand green) */
  --emerald-400: #4FB78B;
  --emerald-100: #E6F4EE;   /* tinted surface */
  --emerald-050: #F1FAF5;

  /* === Champagne — the premium signal =========================
     Used sparingly: KPI numbers on dark, premium badges,
     spotlight icon highlights. NEVER as a fill on light bg. */
  --champagne-600: #B08537;
  --champagne-500: #C99A4A;
  --champagne-400: #D9B26B;
  --champagne-300: #E6C68B;
  --champagne-100: #FBF1DC;

  /* === Neutrals — warm-cool ink mix =========================== */
  --neutral-000: #FFFFFF;
  --neutral-050: #F7F9FC;    /* page bg */
  --neutral-100: #EFF3F8;
  --neutral-150: #E5EAF2;
  --neutral-200: #D6DEEA;
  --neutral-300: #B5C0D0;
  --neutral-400: #8A98AE;
  --neutral-500: #5E6B82;
  --neutral-600: #404B61;
  --neutral-700: #2A3447;
  --neutral-800: #1A2235;
  --neutral-900: #0F1626;

  /* === Semantic =============================================== */
  --color-success: #2D9D6E;
  --color-success-soft: #E6F4EE;
  --color-success-ink: #155E3F;
  --color-warning: #C2780A;
  --color-warning-soft: #FDF1D7;
  --color-warning-ink: #7A4A0E;
  --color-danger:  #C73846;
  --color-danger-soft: #FCE6E8;
  --color-danger-ink: #861E27;
  --color-info:    #2563BC;
  --color-info-soft: #E4EEFB;

  /* === Surfaces & ink (light theme, default) ================== */
  --bg-page:        var(--neutral-050);
  --bg-elevated:    var(--neutral-000);
  --bg-sunken:      var(--neutral-100);
  --bg-veil:        rgba(15,30,60,.04);

  --fg-strong:      var(--neutral-900);
  --fg-default:     var(--neutral-700);
  --fg-muted:       var(--neutral-500);
  --fg-subtle:      var(--neutral-400);
  --fg-on-ink:      var(--neutral-000);
  --fg-on-emerald:  var(--neutral-000);

  --border-hairline: rgba(15,30,60,.08);
  --border-default:  rgba(15,30,60,.12);
  --border-strong:   rgba(15,30,60,.18);

  /* === Type — Vazirmatn ======================================= */
  --font-sans: 'Vazirmatn', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-num:  'Vazirmatn', 'Inter', ui-monospace, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale — designed for 412px viewport, RTL Persian.
     Slightly larger than Latin scale at every step because
     Persian glyphs sit lower with shorter x-height. */
  --t-display:       42px;   --t-display-lh: 1.05;   --t-display-tr: -0.02em;
  --t-title-xl:      28px;   --t-title-xl-lh: 1.18;  --t-title-xl-tr: -0.018em;
  --t-title-lg:      22px;   --t-title-lg-lh: 1.22;  --t-title-lg-tr: -0.012em;
  --t-title:         18px;   --t-title-lh: 1.28;     --t-title-tr: -0.008em;
  --t-body-lg:       16px;   --t-body-lg-lh: 1.55;
  --t-body:          14px;   --t-body-lh: 1.62;
  --t-body-sm:       13px;   --t-body-sm-lh: 1.55;
  --t-caption:       12px;   --t-caption-lh: 1.45;
  --t-micro:         11px;   --t-micro-lh: 1.35;
  --t-overline:      10.5px; --t-overline-lh: 1.2;   --t-overline-tr: 0.14em;

  --t-num-hero:      48px;
  --t-num-display:   34px;
  --t-num-lg:        22px;
  --t-num:           16px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  /* === Radii ================================================== */
  --r-xs:    6px;
  --r-sm:    10px;
  --r-md:    14px;
  --r-lg:    18px;
  --r-xl:    22px;
  --r-2xl:   28px;
  --r-3xl:   34px;
  --r-pill:  999px;

  /* === Spacing — 4 base, fibonacci-ish growth ================ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px;

  /* === Elevation — soft, layered, premium ====================
     Each shadow stacks two stops so edges feel pillowed,
     not stamped. Avoid heavy single-stop shadows. */
  --elev-0:  none;
  --elev-1:  0 1px 0 rgba(15,30,60,.04), 0 1px 2px rgba(15,30,60,.04);
  --elev-2:  0 1px 2px rgba(15,30,60,.05), 0 4px 12px rgba(15,30,60,.06);
  --elev-3:  0 2px 4px rgba(15,30,60,.06), 0 10px 24px rgba(15,30,60,.08);
  --elev-4:  0 4px 8px rgba(15,30,60,.08), 0 18px 38px rgba(15,30,60,.10);
  --elev-5:  0 8px 16px rgba(15,30,60,.10), 0 28px 56px rgba(15,30,60,.14);
  --elev-ink: 0 12px 28px rgba(15,30,60,.32), 0 4px 8px rgba(15,30,60,.18);
  --elev-glow-emerald: 0 12px 28px rgba(45,157,110,.28), 0 2px 6px rgba(45,157,110,.18);

  /* Inner highlights & seams (the premium "glass" detail) */
  --inner-top-hi:    inset 0 1px 0 rgba(255,255,255,.7);
  --inner-top-hi-ink: inset 0 1px 0 rgba(255,255,255,.16);
  --inner-bot-shade:  inset 0 -1px 0 rgba(15,30,60,.08);

  /* === Motion ================================================ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glide:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* === Signature gradients ===================================
     Use these instead of inventing new ones. */
  --grad-ink:       linear-gradient(160deg, var(--ink-700) 0%, var(--ink-900) 100%);
  --grad-ink-deep:  linear-gradient(165deg, var(--ink-800) 0%, var(--ink-950) 80%);
  --grad-emerald:   linear-gradient(135deg, var(--emerald-500), var(--emerald-600));
  --grad-champagne: linear-gradient(135deg, var(--champagne-400), var(--champagne-600));
  --grad-aurora:    radial-gradient(120% 80% at 0% 0%, rgba(45,157,110,.28), transparent 55%),
                    radial-gradient(120% 80% at 100% 100%, rgba(201,154,74,.18), transparent 60%),
                    linear-gradient(160deg, var(--ink-700) 0%, var(--ink-900) 100%);
  --grad-veil-ink:  linear-gradient(180deg, rgba(10,20,40,0) 0%, rgba(10,20,40,.55) 100%);
}

/* ============================================================
   DARK THEME — premium obsidian
   Remaps the neutral ramp + semantic surfaces/ink/borders so the
   entire app inverts cleanly. Brand emerald & champagne stay; only
   their LIGHT tints are softened to translucent washes.
   ============================================================ */
[data-theme="dark"] {
  --neutral-000: #161D30;   /* elevated card surface (the "white") */
  --neutral-050: #0B1120;   /* page — deepest base */
  --neutral-100: #1E2740;   /* chips / hover / sunken */
  --neutral-150: #25304C;
  --neutral-200: #2E3A58;   /* dividers, scrollbar */
  --neutral-300: #3C4A6A;
  --neutral-400: #6E7C97;   /* fg-subtle */
  --neutral-500: #8E9BB5;   /* fg-muted */
  --neutral-600: #AAB6CE;
  --neutral-700: #C9D2E2;   /* fg-default */
  --neutral-800: #DEE5F0;
  --neutral-900: #F2F5FB;   /* fg-strong */

  --bg-veil: rgba(255,255,255,.05);

  --border-hairline: rgba(255,255,255,.08);
  --border-default:  rgba(255,255,255,.13);
  --border-strong:   rgba(255,255,255,.22);

  /* soft tint surfaces → translucent washes that read on dark */
  --emerald-100: rgba(45,157,110,.18);
  --emerald-050: rgba(45,157,110,.11);
  --champagne-100: rgba(201,154,74,.16);

  --color-success-soft: rgba(45,157,110,.18);
  --color-success-ink:  #5FCC9A;
  --color-warning-soft: rgba(194,120,10,.20);
  --color-warning-ink:  #E8B968;
  --color-danger-soft:  rgba(199,56,70,.20);
  --color-danger-ink:   #F18C97;
  --color-info-soft:    rgba(37,99,188,.22);
  --color-info:         #6AA6EC;

  /* a touch lighter navy so the active nav reads on dark */
  --ink-700: #25467A;

  /* deeper, real shadows (the navy-tinted ones vanish on dark) */
  --elev-1:  0 1px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.30);
  --elev-2:  0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.36);
  --elev-3:  0 2px 4px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.42);
  --elev-4:  0 4px 8px rgba(0,0,0,.40), 0 18px 38px rgba(0,0,0,.50);
  --elev-5:  0 8px 16px rgba(0,0,0,.46), 0 28px 56px rgba(0,0,0,.58);
  --elev-ink: 0 12px 28px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.40);
  --inner-top-hi: inset 0 1px 0 rgba(255,255,255,.06);

  color-scheme: dark;
}
:root { color-scheme: light; }
html { transition: background var(--dur-base) var(--ease-out); }

/* ============================================================
   Semantic class shortcuts (so you don't have to reach for vars)
   ============================================================ */
.bb-display    { font: var(--fw-black) var(--t-display)/var(--t-display-lh) var(--font-sans); letter-spacing: var(--t-display-tr); color: var(--fg-strong); }
.bb-title-xl   { font: var(--fw-black) var(--t-title-xl)/var(--t-title-xl-lh) var(--font-sans); letter-spacing: var(--t-title-xl-tr); color: var(--fg-strong); }
.bb-title-lg   { font: var(--fw-bold) var(--t-title-lg)/var(--t-title-lg-lh) var(--font-sans); letter-spacing: var(--t-title-lg-tr); color: var(--fg-strong); }
.bb-title      { font: var(--fw-bold) var(--t-title)/var(--t-title-lh) var(--font-sans); letter-spacing: var(--t-title-tr); color: var(--fg-strong); }
.bb-body-lg    { font: var(--fw-regular) var(--t-body-lg)/var(--t-body-lg-lh) var(--font-sans); color: var(--fg-default); }
.bb-body       { font: var(--fw-regular) var(--t-body)/var(--t-body-lh) var(--font-sans); color: var(--fg-default); }
.bb-body-sm    { font: var(--fw-regular) var(--t-body-sm)/var(--t-body-sm-lh) var(--font-sans); color: var(--fg-default); }
.bb-caption    { font: var(--fw-medium) var(--t-caption)/var(--t-caption-lh) var(--font-sans); color: var(--fg-muted); }
.bb-micro      { font: var(--fw-medium) var(--t-micro)/var(--t-micro-lh) var(--font-sans); color: var(--fg-muted); }
.bb-overline   {
  font: var(--fw-bold) var(--t-overline)/var(--t-overline-lh) 'Inter', var(--font-sans);
  letter-spacing: var(--t-overline-tr); text-transform: uppercase; color: var(--emerald-500);
}

.bb-num-hero    { font: var(--fw-black) var(--t-num-hero)/1 var(--font-num); letter-spacing: -0.03em; font-feature-settings: 'tnum'; }
.bb-num-display { font: var(--fw-black) var(--t-num-display)/1.05 var(--font-num); letter-spacing: -0.02em; font-feature-settings: 'tnum'; }
.bb-num-lg      { font: var(--fw-bold) var(--t-num-lg)/1.1 var(--font-num); letter-spacing: -0.015em; font-feature-settings: 'tnum'; }
.bb-num         { font: var(--fw-bold) var(--t-num)/1.2 var(--font-num); font-feature-settings: 'tnum'; }

/* Helper for premium gold inflected numbers */
.bb-num-champagne {
  background: var(--grad-champagne);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}