/* ============================================================================
   V2PRO — design tokens

   Three layers, in this order, and components may only read from the last two:

     1. PRIMITIVE  raw ramps. No meaning, no theme. Nothing outside this file
                   should ever reference a --c-* token.
     2. SEMANTIC   purpose aliases. This is the layer that flips between dark
                   and light, and the layer components and views actually use.
     3. COMPONENT  per-component handles, built from semantics. Lets one
                   component be retuned without touching the shared palette.

   The payoff is at the bottom: [data-theme='light'] overrides *semantic*
   tokens only. Every component token re-resolves through them automatically,
   so no component ever branches on the active theme.

   ── The two-tier surface contract ────────────────────────────────────────

   This app is two products wearing one skin, and the tokens carry both.

     TIER A — SHOWCASE.  Login, dashboards, the subscription drawer, store,
     wallet, empty states. Glass surfaces, 18–22px radii, gradient numerals,
     ambient motion. Read --glass-*, --r-4/5, --grad-*.

     TIER B — OPERATOR.  Tables, forms, drawers, the command palette, the
     deployment queue. Opaque surfaces, 6–14px radii, tabular figures, motion
     only on state change. Read --sf-*, --r-1/2/3.

   The one rule that is not taste: backdrop blur never goes behind dense text.
   Blur under 11–13px Persian glyphs destroys legibility, which is why tables
   are Tier B and always will be.
   ========================================================================== */

/* ---------- 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;
}

/* ============================================================================
   LAYER 1 — PRIMITIVES
   Raw ramps. Theme-independent. Never referenced outside this file.
   ========================================================================== */

:root {
  /* ---------- navy: the dark surface ramp ----------
     Navy rather than near-black. A neutral #05070e page reads as a void
     behind cyan; carrying blue through the darks lets the accent sit *in*
     the surface instead of floating on top of it. */
  --c-navy-975: #070a14;
  --c-navy-950: #0b1020;
  --c-navy-900: #101729;
  --c-navy-850: #16203a;
  --c-navy-800: #1d2949;
  --c-navy-750: #25345c;

  /* ---------- porcelain: the light surface ramp ---------- */
  --c-porc-50: #ffffff;
  --c-porc-100: #f7f9fe;
  --c-porc-200: #f5f7fc;
  --c-porc-300: #eef1f8;
  --c-porc-400: #e8eefb;

  /* ---------- ink ---------- */
  --c-ink-dark-1: #e9eeff;
  --c-ink-dark-2: #98a4c4;
  /* Tertiary ink is the tightest pair in the dark theme. It has to clear 4.5:1
     against --sf-4 (#25345c), the selected-row surface, which is the lightest
     thing 11px text ever sits on. At #838eaa it measured 4.38 there — this is
     the minimum lightening that clears it, verified in tokens.contrast.test. */
  --c-ink-dark-3: #939eba;
  --c-ink-light-1: #0d1424;
  --c-ink-light-2: #4a5674;
  --c-ink-light-3: #626c82;

  /* ---------- cyan: the signal hue ----------
     The 600/700/800 steps are not aesthetic picks. They are the lightest each
     can be while clearing 4.5:1 in the worst context this app produces —
     coloured text on its own soft tint, over the card surface. Lightening any
     of them by a few percent drops that pair below AA. */
  --c-cyan-300: #67e8f9;
  --c-cyan-400: #22d3ee;
  --c-cyan-700: #0e7f95;
  --c-cyan-600-on-light: #0891ab;
  --c-cyan-700-on-light: #0b778c;
  --c-cyan-800-on-light: #075f70;

  /* ---------- violet: secondary accent, and the gradient partner ---------- */
  --c-violet-400: #7c8cff;
  --c-violet-500: #7c6cff;
  --c-violet-700-on-light: #555dcb;

  /* ---------- status hues ---------- */
  --c-green-400: #2fd98f;
  --c-green-700-on-light: #087c57;
  --c-amber-400: #fbbf24;
  --c-amber-700-on-light: #91610a;
  --c-orange-400: #fb923c;
  --c-orange-700-on-light: #af510c;
  --c-rose-400: #f8607a;
  --c-rose-700-on-light: #c8203f;

  /* ---------- deep stops ----------
     The dark end of a two-stop fill. A meter drawn in one flat colour reads as
     a coloured bar; running it from the deep stop to the bright one gives the
     fill a direction, so length is legible before the number is read. Not text
     colours — they never carry a contrast obligation. */
  --c-green-deep: #17845c;
  --c-amber-deep: #a97a0c;
  --c-orange-deep: #a95514;
  --c-rose-deep: #a41f36;
  --c-cyan-200: #8ceefb;

  /* ---------- contrast anchors ---------- */
  --c-abyss: #032b33;   /* text on a cyan fill */
  --c-white: #ffffff;

  /* ---------- raw scales ---------- */
  --c-space-1: 4px;
  --c-space-2: 8px;
  --c-space-3: 12px;
  --c-space-4: 16px;
  --c-space-5: 24px;
  --c-space-6: 32px;
  --c-space-7: 48px;

  /* Softer than the old 6/10/14. The tight scale made every surface read as a
     spreadsheet cell; these are the values the subscription page uses, held one
     step tighter on Tier B so a dense table still reads as dense. */
  --c-radius-1: 9px;
  --c-radius-2: 12px;
  --c-radius-3: 15px;
  --c-radius-4: 18px;
  --c-radius-5: 22px;
  --c-radius-pill: 999px;

  --c-text-11: 11px;
  --c-text-12: 12px;
  --c-text-13: 13px;
  --c-text-14: 14px;
  --c-text-16: 16px;
  --c-text-20: 20px;
  --c-text-26: 26px;
  --c-text-34: 34px;
  --c-text-44: 44px;
  --c-text-56: 56px;
}

/* ============================================================================
   LAYER 2 — SEMANTIC  (dark is the default theme)
   This is what components read. Light mode overrides exactly this block.
   ========================================================================== */

:root {
  /* ---------- surfaces ----------
     One vertical light source: each step up is lighter and slightly bluer. */
  --bg-0: var(--c-navy-975);   /* page */
  --bg-1: var(--c-navy-950);   /* wells, inputs, table stripes */
  --sf-1: var(--c-navy-900);   /* card */
  --sf-2: var(--c-navy-850);   /* raised / hover */
  --sf-3: var(--c-navy-800);   /* popover, command palette */
  --sf-4: var(--c-navy-750);   /* active / selected */

  /* ---------- ink ---------- */
  --ink-1: var(--c-ink-dark-1);
  --ink-2: var(--c-ink-dark-2);
  /* Tertiary text is 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: var(--c-ink-dark-3);

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

  /* ---------- brand ---------- */
  --brand: var(--c-cyan-400);
  --brand-2: var(--c-cyan-300);
  --brand-3: var(--c-cyan-700);
  --brand-ink: var(--c-abyss);
  --brand-soft: rgba(34, 211, 238, .13);
  --brand-line: rgba(34, 211, 238, .32);
  --violet: var(--c-violet-400);
  --violet-soft: rgba(124, 140, 255, .14);

  /* ---------- status: these four mean status and nothing else ---------- */
  --ok: var(--c-green-400);
  --ok-soft: rgba(47, 217, 143, .13);
  --warn: var(--c-amber-400);
  --warn-soft: rgba(251, 191, 36, .13);
  --neg: var(--c-orange-400);
  --neg-soft: rgba(251, 146, 60, .13);
  --crit: var(--c-rose-400);
  --crit-soft: rgba(248, 96, 122, .13);

  /* Deep companions, for the dark end of a two-stop fill (meters, progress). */
  --brand-hi: var(--c-cyan-200);
  --ok-deep: var(--c-green-deep);
  --warn-deep: var(--c-amber-deep);
  --neg-deep: var(--c-orange-deep);
  --crit-deep: var(--c-rose-deep);

  /* ---------- glass: TIER A surfaces only ----------
     Translucent, so the ambient scene reads through. Never behind dense text. */
  --glass-bg: rgba(22, 30, 58, .62);
  --glass-line: rgba(255, 255, 255, .09);
  --glass-hi: rgba(255, 255, 255, .05);
  --glass-blur: 18px;

  /* ---------- gradients: TIER A ----------
     Violet → cyan, always in that direction, so the eye learns one axis.

     The two stops are their own tokens because the gradient is not only a
     fill: .numeral clips it into text and the gauge feeds it to SVG stops. On
     a light surface the dark-theme cyan is 1.9:1 against near-white, which
     fails even the 3:1 bar for large text and graphics — so light mode swaps
     both stops for the on-light accents rather than leaving the fill alone. */
  --grad-from: var(--c-violet-500);
  --grad-to: var(--c-cyan-400);
  --grad-brand: linear-gradient(135deg, var(--grad-from), var(--grad-to));

  /* Text sitting ON the gradient needs its own ink, not --brand-ink. The
     violet stop is much darker than the cyan one, so an ink tuned for cyan
     (#032b33) only reaches 3.90:1 over violet. This clears 4.5:1 against both
     ends. White is not an option here — it manages 3.6:1 over violet and
     1.8:1 over cyan. */
  --grad-ink: #04121a;
  --grad-brand-dim: linear-gradient(135deg, rgba(124, 108, 255, .22), rgba(34, 211, 238, .22));
  /* The page wash: one wide light source at the top, matching the direction
     the elevation shadows assume. Distinct from the ambient scene, which adds
     drifting orbs on Tier A screens only. */
  --grad-page: radial-gradient(120% 62% at 50% -12%, rgba(34, 211, 238, .07), transparent 62%),
               radial-gradient(90% 52% at 84% 4%, rgba(124, 140, 255, .05), transparent 60%);

  /* ---------- ambient scene: TIER A backdrop ---------- */
  --scene-orb-1: var(--c-violet-500);
  --scene-orb-2: var(--c-cyan-400);
  --scene-orb-opacity: .5;
  --scene-grid-opacity: .42;

  /* ---------- type ---------- */
  --font-sans: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  /* ---------- type scale ---------- */
  --fs-11: var(--c-text-11);
  --fs-12: var(--c-text-12);
  --fs-13: var(--c-text-13);
  --fs-14: var(--c-text-14);   /* base */
  --fs-16: var(--c-text-16);
  --fs-20: var(--c-text-20);
  --fs-26: var(--c-text-26);
  --fs-34: var(--c-text-34);
  --fs-44: var(--c-text-44);   /* TIER A hero numeral */
  --fs-56: var(--c-text-56);   /* TIER A display numeral */
  --lh-body: 1.6;
  --lh-tight: 1.25;

  /* ---------- space (dense dashboard preset) ---------- */
  --sp-1: var(--c-space-1);
  --sp-2: var(--c-space-2);
  --sp-3: var(--c-space-3);
  --sp-4: var(--c-space-4);
  --sp-5: var(--c-space-5);
  --sp-6: var(--c-space-6);
  --sp-7: var(--c-space-7);

  /* ---------- radius ---------- */
  --r-1: var(--c-radius-1);    /* control            TIER B */
  --r-2: var(--c-radius-2);    /* card               TIER B */
  --r-3: var(--c-radius-3);    /* surface            TIER B */
  --r-4: var(--c-radius-4);    /* showcase card      TIER A */
  --r-5: var(--c-radius-5);    /* showcase hero      TIER A */
  --r-pill: var(--c-radius-pill);

  /* ---------- 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);
  --e-glass: 0 24px 60px -18px rgba(0, 0, 0, .65), inset 0 1px 0 var(--glass-hi);
  --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-scene: -1;
  --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;
}

/* ============================================================================
   LAYER 3 — COMPONENT
   Built from semantics only. A component is retuned here without disturbing
   anything else, and every one of these follows the theme for free.
   ========================================================================== */

:root {
  /* ---------- card (TIER B) ---------- */
  --card-bg: var(--sf-1);
  --card-line: var(--line-1);
  --card-radius: var(--r-2);
  --card-pad: var(--sp-4);
  --card-shadow: var(--e1);

  /* ---------- showcase card (TIER A) ---------- */
  --panel-bg: var(--glass-bg);
  --panel-line: var(--glass-line);
  --panel-radius: var(--r-5);
  --panel-pad: var(--sp-5);
  --panel-shadow: var(--e-glass);

  /* ---------- button ---------- */
  --btn-radius: var(--r-1);
  --btn-pad-x: var(--sp-3);
  --btn-pad-y: var(--sp-2);
  --btn-primary-bg: var(--grad-brand);
  --btn-primary-fg: var(--brand-ink);
  --btn-ghost-bg: var(--sf-2);
  --btn-ghost-fg: var(--ink-1);
  --btn-ghost-line: var(--line-2);
  --btn-danger-fg: var(--crit);

  /* ---------- field ---------- */
  --field-bg: var(--bg-1);
  --field-line: var(--line-2);
  --field-line-focus: var(--brand-line);
  --field-fg: var(--ink-1);
  --field-placeholder: var(--ink-3);
  --field-radius: var(--r-1);
  --field-invalid: var(--crit);

  /* ---------- table (TIER B — opaque, never blurred) ---------- */
  --table-head-bg: var(--bg-1);
  --table-row-hover: var(--sf-2);
  --table-row-selected: var(--brand-soft);
  --table-line: var(--line-1);

  /* ---------- badge & chip ---------- */
  --badge-radius: var(--r-pill);
  --badge-pad-x: var(--sp-2);
  --chip-bg: rgba(255, 255, 255, .06);
  --chip-line: var(--line-2);

  /* ---------- meter ---------- */
  --meter-track: var(--bg-1);
  --meter-radius: var(--r-pill);
  --meter-height: 6px;

  /* ---------- gauge (TIER A) ---------- */
  --gauge-track: rgba(255, 255, 255, .07);
  --gauge-stroke: 13px;
  --gauge-size: 186px;

  /* ---------- overlays ---------- */
  --popover-bg: var(--sf-3);
  --popover-line: var(--line-2);
  --popover-shadow: var(--e3);
  --drawer-bg: var(--sf-1);
  --drawer-shadow: var(--e4);
  --modal-bg: var(--sf-2);
  --modal-radius: var(--r-3);

  /* ---------- navigation ---------- */
  --nav-item-fg: var(--ink-2);
  --nav-item-active-fg: var(--ink-1);
  --nav-item-active-bg: var(--brand-soft);
  --nav-marker: var(--brand);

  /* ---------- chart ---------- */
  --chart-line: var(--brand);
  --chart-grid: var(--line-1);
  --chart-axis: var(--ink-3);
}

/* ============================================================================
   LIGHT THEME
   Semantic overrides only — every component token above re-resolves through
   these, which is the whole reason the layers exist.

   Not an inversion. Surfaces stay near-white with a cool cast, the accents
   darken to hold 4.5:1 on light fills, and shadows lose the dark-mode blue.
   ========================================================================== */

[data-theme='light'] {
  --bg-0: var(--c-porc-300);
  --bg-1: var(--c-porc-200);
  --sf-1: var(--c-porc-50);
  --sf-2: var(--c-porc-100);
  --sf-3: var(--c-porc-50);
  --sf-4: var(--c-porc-400);

  --ink-1: var(--c-ink-light-1);
  --ink-2: var(--c-ink-light-2);
  --ink-3: var(--c-ink-light-3);

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

  /* See the ramp comment in LAYER 1: these are contrast floors, not taste. */
  --brand: var(--c-cyan-700-on-light);
  --brand-2: var(--c-cyan-600-on-light);
  --brand-3: var(--c-cyan-800-on-light);
  --brand-ink: var(--c-white);
  --brand-soft: rgba(11, 119, 140, .10);
  --brand-line: rgba(11, 119, 140, .30);
  --violet: var(--c-violet-700-on-light);
  --violet-soft: rgba(85, 93, 203, .10);

  --ok: var(--c-green-700-on-light);
  --ok-soft: rgba(8, 124, 87, .10);
  --warn: var(--c-amber-700-on-light);
  --warn-soft: rgba(145, 97, 10, .12);
  --neg: var(--c-orange-700-on-light);
  --neg-soft: rgba(175, 81, 12, .11);
  --crit: var(--c-rose-700-on-light);
  --crit-soft: rgba(200, 32, 63, .10);

  /* Glass over a light page needs more opacity, not less: at .62 the text
     behind it competes with the text on it. */
  --glass-bg: rgba(255, 255, 255, .74);
  --glass-line: rgba(30, 35, 80, .10);
  --glass-hi: rgba(255, 255, 255, .9);

  /* Both gradient stops darken. The gradient is clipped into .numeral text and
     carries white --brand-ink on .btn--grad; keeping the dark-theme cyan here
     would put 1.9:1 text on a white card. */
  --grad-from: var(--c-violet-700-on-light);
  --grad-to: var(--c-cyan-700-on-light);
  --grad-ink: var(--c-white);

  --grad-page: radial-gradient(120% 62% at 50% -12%, rgba(11, 124, 146, .09), transparent 62%),
               radial-gradient(90% 52% at 84% 4%, rgba(91, 99, 216, .05), transparent 60%);
  --scene-orb-opacity: .34;
  --scene-grid-opacity: .3;

  --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);
  --e-glass: 0 24px 60px -24px rgba(40, 50, 120, .28), inset 0 1px 0 var(--glass-hi);
  --glow-brand: 0 0 0 1px var(--brand-line), 0 6px 20px -6px rgba(11, 119, 140, .3);

  --chip-bg: rgba(30, 35, 80, .06);
  --gauge-track: rgba(30, 35, 80, .09);

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

  color-scheme: light;
}