/**
 * Purbodix 2.0 — Design Tokens
 * SOURCE OF TRUTH for all design values.
 * Every component MUST reference these variables — no hardcoded hex values.
 * Derived from the Purbodix logo: Royal Blue #1E63C9
 */

:root {
    /* ─── Brand Colors ────────────────────────────────────────────── */
    --color-brand:        #1E63C9;
    --color-brand-dark:   #0F3F8A;
    --color-brand-mid:    #2D7DD2;
    --color-brand-light:  #EBF3FC;
    --color-brand-pale:   #D0E7FB;
    --color-surface:      #F8FBFF;
    --color-white:        #FFFFFF;
    --color-black:        #111111;
    --color-muted:        #5C7A9A;
    --color-border:       #C5D9F1;
    --color-breaking:     #D32F2F;
    --color-sponsored:    #F57F17;

    /* ─── State Accent Colors ─────────────────────────────────────── */
    --color-assam:        #1E63C9;
    --color-arunachal:    #1A7B3A;
    --color-tripura:      #8B1A1A;
    --color-manipur:      #E85D04;
    --color-meghalaya:    #3D7A2A;
    --color-mizoram:      #6B4FA0;
    --color-nagaland:     #C44D26;
    --color-sikkim:       #1A7B8A;

    /* ─── Typography ──────────────────────────────────────────────── */
    --font-bengali:       "Hind Siliguri", "Noto Sans Bengali", sans-serif;
    --font-english:       "Inter", system-ui, -apple-system, sans-serif;
    --font-headline-en:   "Playfair Display", Georgia, serif;
    --font-headline-bn:   "Tiro Bangla", serif;
    --font-mono:          "JetBrains Mono", "Fira Code", monospace;

    /* Font Sizes */
    --size-xs:            0.75rem;     /* 12px */
    --size-sm:            0.875rem;    /* 14px */
    --size-body:          1rem;        /* 16px */
    --size-lead:          1.125rem;    /* 18px */
    --size-h4:            1.25rem;     /* 20px */
    --size-h3:            1.5rem;      /* 24px */
    --size-h2:            2rem;        /* 32px */
    --size-h1:            2.5rem;      /* 40px */
    --size-hero:          3rem;        /* 48px */

    /* Line Heights */
    --line-height-body:    1.75;
    --line-height-heading: 1.2;
    --line-height-tight:   1.1;

    /* Letter Spacing */
    --letter-spacing-caps: 0.08em;
    --letter-spacing-tight: -0.01em;

    /* ─── Spacing (8px grid) ──────────────────────────────────────── */
    --space-1:  0.5rem;    /* 8px */
    --space-2:  1rem;      /* 16px */
    --space-3:  1.5rem;    /* 24px */
    --space-4:  2rem;      /* 32px */
    --space-5:  2.5rem;    /* 40px */
    --space-6:  3rem;      /* 48px */
    --space-8:  4rem;      /* 64px */
    --space-10: 5rem;      /* 80px */

    /* ─── Elevation & Shadow ──────────────────────────────────────── */
    --shadow-card:        0 2px 8px rgba(30, 99, 201, 0.08);
    --shadow-card-hover:  0 6px 20px rgba(30, 99, 201, 0.16);
    --shadow-header:      0 2px 12px rgba(15, 63, 138, 0.15);
    --shadow-modal:       0 16px 48px rgba(15, 63, 138, 0.24);
    --shadow-inset:       inset 0 2px 4px rgba(15, 63, 138, 0.08);

    /* ─── Border Radius ───────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-pill: 20px;
    --radius-full: 50%;

    /* ─── Transitions ─────────────────────────────────────────────── */
    --transition-fast:    150ms ease;
    --transition-default: 200ms ease;
    --transition-slow:    300ms ease;
    --transition-spring:  250ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Z-Index Scale ───────────────────────────────────────────── */
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-drawer:     300;
    --z-overlay:    400;
    --z-modal:      500;
    --z-toast:      600;
    --z-mobile-nav: 900;
    --z-progress:   1000;

    /* ─── Layout ──────────────────────────────────────────────────── */
    --container-max:     1280px;
    --content-max:       740px;
    --sidebar-width:     300px;
    --header-height:     64px;
    --topbar-height:     36px;
    --mobile-nav-height: 56px;
}

/* ─── Dark Mode Variables ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root.dark-mode,
    :root {
        /* Override only when dark mode class is added */
    }
}

.dark-mode {
    --color-surface:     #0D1117;
    --color-white:       #161B22;
    --color-black:       #E6EDF3;
    --color-muted:       #8B949E;
    --color-border:      #30363D;
    --color-brand-light: #1A2332;
    --shadow-card:       0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.5);
}