/* tokens.css — design tokens. Themes switch via <html data-theme="light|dark">. Use var(--x) everywhere. */
@font-face{font-family:"NotoBn";src:url(/fonts/NotoSansBengali.woff) format("woff");font-weight:400 700;font-display:swap}

:root{
  /* brand */
  --brand:#4f46e5; --brand-600:#4338ca; --brand-400:#818cf8; --brand-300:#a5b4fc; --brand-50:#eef2ff;
  --ink:#0f172a; --ink-2:#1e293b;
  --accent:#f59e0b;            /* saffron: pending / highlight, use sparingly */
  --ok:#059669; --warn:#d97706; --danger:#dc2626; --info:#0284c7;
  --ok-bg:rgba(5,150,105,.12); --warn-bg:rgba(217,119,6,.14); --danger-bg:rgba(220,38,38,.12); --info-bg:rgba(2,132,199,.12);

  /* type */
  --font:"NotoBn",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem;
  --lh:1.55; --lh-tight:1.25; --font-scale:1;

  /* space / shape */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-full:999px;
  --touch:44px; --gutter:16px;
  --nav-h:64px; --rail-w:232px; --top-h:56px;
  --ease:cubic-bezier(.2,.8,.2,1); --dur:.18s;
  --z-nav:40; --z-top:45; --z-overlay:80; --z-toast:100;
}

:root,:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f4fb; --bg-2:#e9ebf7;
  --surface:#ffffff; --surface-2:#f7f8fd; --surface-3:#eef0f9;
  --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.9); --glass-border:rgba(79,70,229,.14);
  --text:#0f172a; --text-2:#475569; --text-3:#64748b; --text-inv:#fff;
  --line:rgba(15,23,42,.1); --line-strong:rgba(15,23,42,.2);
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --shadow-md:0 6px 20px -6px rgba(49,46,129,.18),0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:0 24px 60px -16px rgba(49,46,129,.35),0 8px 20px rgba(15,23,42,.08);
  --focus:#4f46e5; --skeleton-a:#e6e8f4; --skeleton-b:#f4f5fc;
  --hero-a:#4f46e5; --hero-b:#312e81; --scrim:rgba(15,23,42,.45);
  --brand-soft:var(--brand-50); --brand-text:var(--brand-600);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1120; --bg-2:#0f172a;
  --surface:#131c31; --surface-2:#18233c; --surface-3:#1f2c49;
  --glass:rgba(24,35,60,.66); --glass-strong:rgba(24,35,60,.92); --glass-border:rgba(165,180,252,.16);
  --text:#e8ecf8; --text-2:#aab4cf; --text-3:#8390b0; --text-inv:#fff;
  --line:rgba(226,232,255,.1); --line-strong:rgba(226,232,255,.22);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-lg:0 28px 70px -16px rgba(0,0,0,.75);
  --focus:#a5b4fc; --skeleton-a:#1a2540; --skeleton-b:#26345a;
  --hero-a:#4338ca; --hero-b:#1e1b4b; --scrim:rgba(2,6,23,.65);
  --brand-soft:rgba(129,140,248,.16); --brand-text:#a5b4fc;
  --ok-bg:rgba(52,211,153,.14); --warn-bg:rgba(251,191,36,.14); --danger-bg:rgba(248,113,113,.15); --info-bg:rgba(56,189,248,.14);
  --ok:#34d399; --warn:#fbbf24; --danger:#f87171; --info:#38bdf8;
}
@media (prefers-reduced-motion:reduce){:root{--dur:0s}}