/* ============================================================================
   V2PRO — design tokens
   Dark is the default. [data-theme="light"] overrides the same names, so no
   component ever needs to know which theme is active.
   ========================================================================== */

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

:root {
  /* ---------- surfaces (dark) ----------
     One vertical light source: each step up is lighter and slightly bluer. */
  --bg-0: #05070e;   /* page */
  --bg-1: #090d18;   /* wells, inputs, table stripes */
  --sf-1: #0d1220;   /* card */
  --sf-2: #131a2c;   /* raised / hover */
  --sf-3: #1a2440;   /* popover, command palette */
  --sf-4: #202c4d;   /* active / selected */

  /* ---------- ink ---------- */
  --ink-1: #e8edfb;  /* primary text */
  --ink-2: #96a2c2;  /* secondary */
  /* Tertiary text. Lighter than a "muted grey" instinct wants, because this is
     what `.field__help`, `.stat__meta` and table sub-labels use — 11px text,
     which AA scores at the 4.5:1 threshold, not the 3:1 large-text one. */
  --ink-3: #818ca8;

  /* ---------- lines ---------- */
  --line-1: rgba(140, 165, 225, .10);
  --line-2: rgba(140, 165, 225, .18);
  --line-3: rgba(140, 165, 225, .28);

  /* ---------- brand: cyan is the signal colour ---------- */
  --brand: #22d3ee;
  --brand-2: #67e8f9;
  --brand-3: #0e7f95;
  --brand-ink: #032b33;                    /* text on a brand fill */
  --brand-soft: rgba(34, 211, 238, .13);
  --brand-line: rgba(34, 211, 238, .32);
  --violet: #7c8cff;                       /* secondary accent only */
  --violet-soft: rgba(124, 140, 255, .14);

  /* ---------- status: these four mean status and nothing else ---------- */
  --ok: #2fd98f;
  --ok-soft: rgba(47, 217, 143, .13);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .13);
  --neg: #fb923c;
  --neg-soft: rgba(251, 146, 60, .13);
  --crit: #f8607a;
  --crit-soft: rgba(248, 96, 122, .13);

  /* ---------- type scale ---------- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;   /* base */
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-26: 26px;
  --fs-34: 34px;
  --lh-body: 1.6;
  --lh-tight: 1.25;

  /* ---------- space (dense dashboard preset) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---------- radius ---------- */
  --r-1: 6px;    /* control */
  --r-2: 10px;   /* card */
  --r-3: 14px;   /* surface */
  --r-pill: 20px;

  /* ---------- elevation ----------
     Every surface = inset rim highlight + inset bottom shade + drop shadow.
     Blur and offset scale with height, so depth reads consistently. */
  --rim: inset 0 1px 0 rgba(255, 255, 255, .055);
  --rim-strong: inset 0 1px 0 rgba(255, 255, 255, .09);
  --shade: inset 0 -1px 0 rgba(0, 0, 0, .3);

  --e1: var(--rim), var(--shade), 0 1px 2px rgba(2, 4, 10, .5), 0 4px 12px -4px rgba(2, 4, 10, .55);
  --e2: var(--rim), var(--shade), 0 2px 6px rgba(2, 4, 10, .55), 0 10px 24px -8px rgba(2, 4, 10, .6);
  --e3: var(--rim-strong), 0 12px 32px -8px rgba(2, 4, 10, .7), 0 2px 8px rgba(2, 4, 10, .5);
  --e4: var(--rim-strong), 0 32px 64px -16px rgba(2, 4, 10, .8), 0 4px 16px rgba(2, 4, 10, .6);
  --glow-brand: 0 0 0 1px var(--brand-line), 0 6px 20px -6px rgba(34, 211, 238, .45);

  --blur-2: 14px;
  --blur-3: 20px;
  --blur-4: 28px;

  --scrim: rgba(3, 5, 12, .62);

  /* ---------- focus ---------- */
  --ring: 0 0 0 3px rgba(34, 211, 238, .3);

  /* ---------- motion ---------- */
  --dur-1: 120ms;   /* press */
  --dur-2: 180ms;   /* state change */
  --dur-3: 260ms;   /* enter */
  --dur-4: 320ms;   /* drawer */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------- z-index scale ---------- */
  --z-content: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-drawer: 30;
  --z-modal: 40;
  --z-cmdk: 50;
  --z-toast: 60;

  /* ---------- layout ---------- */
  --sidebar-w: 244px;
  --sidebar-rail: 68px;
  --topbar-h: 56px;
  --content-max: 1440px;

  color-scheme: dark;
}

/* ============================================================================
   Light theme — not an inversion. Surfaces stay near-white with a cool cast,
   the brand darkens to hold 4.5:1 on light fills, and shadows lose the
   dark-mode blue tint.
   ========================================================================== */
[data-theme='light'] {
  --bg-0: #eef1f8;
  --bg-1: #f5f7fc;
  --sf-1: #ffffff;
  --sf-2: #f7f9fe;
  --sf-3: #ffffff;
  --sf-4: #e8eefb;

  --ink-1: #0d1424;
  --ink-2: #4a5674;
  --ink-3: #626c82;

  --line-1: rgba(20, 35, 75, .10);
  --line-2: rgba(20, 35, 75, .16);
  --line-3: rgba(20, 35, 75, .26);

  /* Darkened so brand-on-white text and icons stay accessible.
     These exact values are not aesthetic choices — they are the lightest each
     hue can be while clearing 4.5:1 in its *worst* context, which is coloured
     text on its own soft tint inside a badge (tint over --sf-1). Lightening any
     of them by even a few percent drops that pair below AA. */
  --brand: #0b778c;
  --brand-2: #0891ab;
  --brand-3: #075f70;
  --brand-ink: #ffffff;
  --brand-soft: rgba(11, 119, 140, .10);
  --brand-line: rgba(11, 119, 140, .30);
  --violet: #555dcb;
  --violet-soft: rgba(85, 93, 203, .10);

  --ok: #087c57;
  --ok-soft: rgba(8, 124, 87, .10);
  --warn: #91610a;
  --warn-soft: rgba(145, 97, 10, .12);
  --neg: #af510c;
  --neg-soft: rgba(175, 81, 12, .11);
  --crit: #c8203f;
  --crit-soft: rgba(200, 32, 63, .10);

  --rim: inset 0 1px 0 rgba(255, 255, 255, .9);
  --rim-strong: inset 0 1px 0 rgba(255, 255, 255, 1);
  --shade: inset 0 -1px 0 rgba(20, 35, 75, .06);

  --e1: var(--rim), var(--shade), 0 1px 2px rgba(20, 35, 75, .07), 0 4px 12px -4px rgba(20, 35, 75, .1);
  --e2: var(--rim), var(--shade), 0 2px 6px rgba(20, 35, 75, .08), 0 10px 24px -8px rgba(20, 35, 75, .13);
  --e3: var(--rim-strong), 0 12px 32px -8px rgba(20, 35, 75, .18), 0 2px 8px rgba(20, 35, 75, .08);
  --e4: var(--rim-strong), 0 32px 64px -16px rgba(20, 35, 75, .22), 0 4px 16px rgba(20, 35, 75, .1);
  --glow-brand: 0 0 0 1px var(--brand-line), 0 6px 20px -6px rgba(11, 119, 140, .3);

  --scrim: rgba(20, 32, 60, .38);
  --ring: 0 0 0 3px rgba(11, 119, 140, .26);

  color-scheme: light;
}