/* =========================================================
   Hazra EV — Admin Panel
   Design tokens. Every other stylesheet reads from here and
   defines no raw colour of its own.
   ========================================================= */

:root {
    /* ---- brand ---- */
    --hazra-purple: #5D158C;
    --hazra-purple-dark: #3B0C64;
    --hazra-purple-soft: #8B5FCF;
    --hazra-blue: #206B89;
    --hazra-blue-soft: #5BB3D6;
    --hazra-cyan: #31B9E1;
    --hazra-orange: #E27A1E;
    --hazra-orange-soft: #F5A65C;

    /* ---- semantic ---- */
    --good: #1E7A2E;
    --bad: #C62828;
    --warn: #E27A1E;
    --info: #206B89;

    /* Tinted backgrounds for badges, banners and toast discs. Kept as
       explicit hex rather than colour-mix so the dark theme can retune
       them independently. */
    --good-bg: #E8F3E9;
    --bad-bg: #FBEAEA;
    --warn-bg: #FFF3E0;
    --info-bg: #E7EFF9;

    /* ---- surfaces ---- */
    --admin-bg: #F7F8FA;
    --admin-card: #FFFFFF;
    --sidebar-bg: #3B0C64;
    --hairline: #E5E7EB;
    --hairline-strong: #D1D5DB;

    /* ---- text ---- */
    --text-primary: #25202B;
    --text-secondary: #6F6A76;
    --text-muted: #9CA3AF;
    --text-on-dark: #FFFFFF;
    --text-muted-on-dark: #D8CDE2;

    /* ---- type ----
       One family for body and headings, exactly as the mockup
       (the site's own stylesheet) does. Baloo 2 is the brand lockup only;
       Noto Sans Bengali carries the logo slogan, which loses its
       conjuncts in a Latin face. */
    --font-head: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-brand: 'Baloo 2', 'Poppins', cursive;
    --font-bn: 'Noto Sans Bengali', 'Poppins', sans-serif;

    --fs-display: clamp(1.5rem, 2.4vw, 2rem);
    --fs-h2: 1.25rem;
    --fs-h3: 1.05rem;
    --fs-body: 0.9375rem;
    --fs-sm: 0.8125rem;
    --fs-xs: 0.6875rem;

    /* ---- space (4px scale) ---- */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;
    --s8: 32px;
    --s10: 40px;
    --s12: 48px;
    --s16: 64px;

    /* ---- layout ---- */
    --sidebar-w: 268px;
    --sidebar-w-collapsed: 82px;
    --topbar-h: 72px;
    --content-max: 1460px;
    --gutter: 34px;

    /* Nav geometry. The active pill is flush to the sidebar's right edge and
       flares outward with two concave fillets — item box and pill box must be
       identical or the notches sit off the curve. */
    --nav-h: 52px;
    --nav-inset: 10px;
    --notch: 18px;
    --nav-radius: 26px;

    /* ---- radius ---- */
    --radius: 22px;
    --radius-sm: 14px;
    --radius-xs: 10px;
    --radius-full: 999px;

    /* ---- elevation ---- */
    --card-shadow: 0 10px 24px -12px rgba(93, 21, 140, .22), 0 2px 6px -2px rgba(0, 0, 0, .05);
    --card-shadow-hover: 0 22px 40px -18px rgba(93, 21, 140, .32), 0 4px 10px -4px rgba(0, 0, 0, .07);
    --overlay-shadow: 0 32px 64px -24px rgba(59, 12, 100, .45);
    --inset-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    --sidebar-shadow: 6px 0 24px -12px rgba(59, 12, 100, .35);

    /* Cards sit on a tinted background and are edged in white rather than a
       hairline, so the surface reads as lifted instead of outlined. Dark
       retunes this to a real hairline — a white edge would glow there. */
    --card-edge: rgba(255, 255, 255, .9);

    /* ---- motion ---- */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: 140ms;
    --dur: 180ms;
    --dur-slow: 260ms;

    /* ---- focus ---- */
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--hazra-blue);

    /* ---- chart series (fixed order, never cycled) ---- */
    --series-1: var(--hazra-purple);
    --series-2: var(--hazra-blue);
    --series-3: var(--hazra-orange);
    --series-4: var(--hazra-purple-soft);
    --grid-line: #E5E7EB;

    /* ---- legacy aliases (for any old refs) ---- */
    --brand-purple: var(--hazra-purple);
    --brand-purple-soft: var(--hazra-purple-soft);
    --brand-blue: var(--hazra-blue);
    --brand-blue-soft: var(--hazra-blue-soft);
    --brand-orange: var(--hazra-orange);
    --brand-orange-soft: var(--hazra-orange-soft);
    --brand-red: var(--hazra-purple);
    --brand-magenta: var(--hazra-purple-dark);
    --bg: var(--admin-bg);
    --surface: var(--admin-card);
    --surface-2: var(--admin-bg);
    --surface-3: var(--hairline);
    --text-dark: var(--text-primary);
    --text-mid: var(--text-secondary);
    --text-on-brand: var(--text-on-dark);

    color-scheme: light;
}

/* =========================================================
   Dark theme.

   Not an inversion — the neutrals keep a warm purple cast so
   the brand purple does not read as an alarm on a cold grey. The
   semantic colours are lifted, not just darkened, because the
   AA target moves when the background does.
   ========================================================= */
[data-theme='dark'] {
    --hazra-purple: #B39DDB;
    --hazra-purple-dark: #8B5FCF;
    --hazra-purple-soft: #D1C4E9;
    --hazra-blue: #64B5F6;
    --hazra-blue-soft: #90CAF9;
    --hazra-cyan: #7DD3FC;
    --hazra-orange: #FFB74D;
    --hazra-orange-soft: #FFCC80;

    --good: #6ABF6E;
    --bad: #EF5350;
    --warn: #FFB74D;
    --info: #64B5F6;

    --good-bg: #1E2E20;
    --bad-bg: #33201F;
    --warn-bg: #33281A;
    --info-bg: #1C2733;

    --admin-bg: #1A1423;
    --admin-card: #231D2E;
    --sidebar-bg: #1F182A;
    --hairline: #3D304A;
    --hairline-strong: #4A3D5A;

    --text-primary: #F3EAF7;
    --text-secondary: #B9A8C8;
    --text-muted: #8B7B95;
    --text-on-dark: #FFFFFF;
    --text-muted-on-dark: #D8CDE2;

    --card-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .4);
    --card-shadow-hover: 0 22px 40px -20px rgba(0, 0, 0, .8), 0 4px 10px -4px rgba(0, 0, 0, .5);
    --overlay-shadow: 0 32px 64px -24px rgba(0, 0, 0, .8);
    --inset-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    --sidebar-shadow: 6px 0 24px -14px rgba(0, 0, 0, .8);
    --card-edge: var(--hairline);

    --grid-line: #3D304A;

    /* ---- legacy aliases ---- */
    --brand-purple: var(--hazra-purple);
    --brand-purple-soft: var(--hazra-purple-soft);
    --brand-blue: var(--hazra-blue);
    --brand-blue-soft: var(--hazra-blue-soft);
    --brand-orange: var(--hazra-orange);
    --brand-orange-soft: var(--hazra-orange-soft);
    --brand-red: var(--hazra-purple);
    --brand-magenta: var(--hazra-purple-dark);
    --bg: var(--admin-bg);
    --surface: var(--admin-card);
    --surface-2: var(--admin-bg);
    --surface-3: var(--hairline);
    --text-dark: var(--text-primary);
    --text-mid: var(--text-secondary);
    --text-on-brand: var(--text-on-dark);

    color-scheme: dark;
}

/* Reduced motion is honoured globally rather than per-component, so a new
   component cannot forget to. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 1ms;
        --dur: 1ms;
        --dur-slow: 1ms;
    }
}