/* ═══════════════════════════════════════════════════════════════
   BEW Design Token System — Single Source of Truth
   
   RULE: No CSS file, no Tailwind class, no inline style may
   use a hardcoded value for any property listed here.
   All values MUST reference these variables.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── 1. COLOR TOKENS ─────────────────────────────────────── */

    /* Brand */
    --color-primary: #2563eb;
    --color-primary-dark: #1e40af;
    --color-primary-light: #dbeafe;

    /* Semantic */
    --color-success: #10b981;
    --color-success-light: rgba(16, 185, 129, 0.1);
    --color-warning: #f59e0b;
    --color-warning-light: rgba(245, 158, 11, 0.1);
    --color-danger: #ef4444;
    --color-danger-light: rgba(239, 68, 68, 0.1);
    --color-info: #0ea5e9;

    /* Neutral (Surfaces) */
    --color-bg: #f1f5f9;
    --color-surface: #ffffff;
    --color-card: #ffffff;
    --color-input: #ffffff;
    --color-footer: rgba(255, 255, 255, 0.7);

    /* Neutral (Text) */
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-text-inverse: #f8fafc;

    /* Neutral (Borders) */
    --color-border: #e2e8f0;
    --color-border-hover: #cbd5e1;
    --color-border-subtle: #f1f5f9;

    /* Interactive (Buttons) */
    --color-btn-primary: #3b82f6;
    --color-btn-danger: #ef4444;
    --color-btn-orange: #ea580c;
    --color-btn-secondary: var(--color-surface);
    --color-btn-text: #f8fafc;
    --color-btn-hover: rgba(0, 0, 0, 0.04);

    /* ── 2. TYPOGRAPHY TOKENS ────────────────────────────────── */

    --font-primary: 'Noto Sans Bengali', system-ui, -apple-system, sans-serif;
    --font-display: 'Inter', 'Noto Sans Bengali', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.95rem;

    --text-sm: 1.0rem;

    --text-base: 1.05rem;

    --text-lg: 1.1rem;

    --text-xl: 1.25rem;

    --text-2xl: 1.5rem;

    --text-3xl: 2.0rem;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semi: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* ── 3. SPACING TOKENS (4px base grid) ───────────────────── */

    --space-0: 0;
    --space-1: 0.25rem;
    /*  4px */
    --space-2: 0.5rem;
    /*  8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */

    /* ── 4. LAYOUT TOKENS ────────────────────────────────────── */

    --header-height: 80px;
    --sidebar-width: 280px;
    --container-max: 1280px;
    --content-max: 960px;

    /* Grid gaps */
    --gap-sm: 0.75rem;
    --gap-md: 1.5rem;
    --gap-lg: 2rem;
    --gap-xl: 3rem;

    /* ── 5. BORDER RADIUS TOKENS ─────────────────────────────── */

    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── 6. SHADOW TOKENS ────────────────────────────────────── */

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 6px 12px -2px rgba(0, 0, 0, 0.1), 0 3px 6px -3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --ring: 0 0 0 3px rgba(37, 99, 235, 0.3);

    /* ── 7. Z-INDEX SCALE (Strict — No Ad-Hoc Values) ────────── */

    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 900;
    --z-sidebar: 950;
    --z-header: 1000;
    --z-popover: 1010;
    --z-modal: 1100;
    --z-toast: 1200;
    --z-tooltip: 1300;

    /* ── 8. ANIMATION TOKENS ─────────────────────────────────── */

    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;

    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition: all var(--duration-normal) var(--ease-default);
    --transition-fast: all var(--duration-fast) var(--ease-default);
    --transition-btn: all var(--duration-slow) var(--ease-bounce);

    /* Button specific */
    --btn-scale: 1.05;
    --btn-radius: var(--radius);

    /* ── 9. LEGACY ALIASES (DO NOT ADD NEW ONES) ─────────────── */
    /* These map old variable names → new tokens so existing CSS
       and Tailwind classes continue to work during migration.
       Remove each alias when all references are migrated. */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --secondary: var(--color-text-muted);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --card-bg: var(--color-card);
    --input-bg: var(--color-input);
    --footer-bg: var(--color-footer);
    --text-main: var(--color-text);
    --text-muted: var(--color-text-muted);
    --text-inverse: var(--color-text-inverse);
    --border: var(--color-border);
    --border-hover: var(--color-border-hover);
    --btn-primary: var(--color-btn-primary);
    --btn-navy: var(--color-btn-primary);
    --btn-danger: var(--color-btn-danger);
    --btn-red: var(--color-btn-danger);
    --btn-orange: var(--color-btn-orange);
    --btn-secondary: var(--color-btn-secondary);
    --btn-text-light: var(--color-btn-text);
    --btn-hover-bg: var(--color-btn-hover);
    --btn-transition: var(--transition-btn);
    --font-main: var(--font-primary);
    --font-inter: var(--font-display);
    --dark: var(--color-text);
    --light: var(--color-bg);
    --text-color: var(--color-text);
}

/* ── Mobile overrides ──────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --header-height: 60px;
        --sidebar-width: 260px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* ── DARK THEME ──────────────────────────────────────────────── */
[data-theme='dark'] {
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-primary-light: rgba(59, 130, 246, 0.15);

    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f87171;

    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-card: #1e293b;
    --color-input: #0f172a;
    --color-footer: rgba(15, 23, 42, 0.9);

    --color-text: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #0f172a;

    --color-border: #334155;
    --color-border-hover: #475569;
    --color-border-subtle: #1e293b;

    --color-btn-primary: #3b82f6;
    --color-btn-danger: #f87171;
    --color-btn-orange: #fb923c;
    --color-btn-secondary: #334155;
    --color-btn-hover: rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    --ring: 0 0 0 3px rgba(59, 130, 246, 0.4);

    /* Legacy aliases */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --secondary: var(--color-text-muted);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --card-bg: var(--color-card);
    --input-bg: var(--color-input);
    --footer-bg: var(--color-footer);
    --text-main: var(--color-text);
    --text-muted: var(--color-text-muted);
    --text-inverse: var(--color-text-inverse);
    --border: var(--color-border);
    --border-hover: var(--color-border-hover);
    --btn-primary: var(--color-btn-primary);
    --btn-danger: var(--color-btn-danger);
    --btn-orange: var(--color-btn-orange);
    --btn-secondary: var(--color-btn-secondary);
    --btn-text-light: var(--color-btn-text);
    --btn-hover-bg: var(--color-btn-hover);
    --btn-navy: var(--color-btn-primary);
    --btn-red: var(--color-btn-danger);
}



/* ── USER DEFINED THEMES (From README) ── */
[data-theme="matrix"] {
    --bg-root: #050d0a;
    --bg-sidebar: #071510;
    --bg-card: #0a1c15;
    --bg-hover: #0e2419;
    --bg-active: rgba(16, 185, 129, .08);
    --bg-input: #071510;
    --accent: #10b981;
    --accent-light: #34d399;
    --accent-glow: rgba(16, 185, 129, .14);
    --accent-dim: rgba(16, 185, 129, .45);
    --text-1: #10b981;
    --text-2: #a7f3d0;
    --text-3: #6ee7b7;
    --text-label: #059669;
    --text-muted: rgba(16, 185, 129, .4);
    --text-value: #ecfdf5;
    --border: rgba(16, 185, 129, .2);
    --border-h: rgba(16, 185, 129, .55);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --cat-header-bg: rgba(16, 185, 129, .06);
    --cat-header-border: rgba(16, 185, 129, .15);
    --btn-fg: #050d0a;
    --toggle-thumb: #059669;
}




/* ── 4. Cream — Monokai ───────────────────────────────────────── */
[data-theme="cream"] {
    --bg-root: #272822;
    /* monokai bg */
    --bg-sidebar: #1e1f1c;
    --bg-card: #2d2e27;
    --bg-hover: #3a3b34;
    --bg-active: rgba(166, 226, 46, .07);
    --bg-input: #272822;
    --accent: #a6e22e;
    /* monokai green */
    --accent-light: #e6db74;
    /* monokai yellow */
    --accent-glow: rgba(166, 226, 46, .12);
    --accent-dim: rgba(166, 226, 46, .4);
    --text-1: #f8f8f2;
    /* monokai fg */
    --text-2: #cfcfc2;
    --text-3: #75715e;
    /* monokai comment */
    --text-label: #5c5c4d;
    --text-muted: #414139;
    --text-value: #f8f8f2;
    --border: rgba(166, 226, 46, .16);
    --border-h: rgba(166, 226, 46, .5);
    --success: #a6e22e;
    --warning: #fd971f;
    /* monokai orange */
    --danger: #f92672;
    /* monokai pink */
    --cat-header-bg: rgba(166, 226, 46, .05);
    --cat-header-border: rgba(166, 226, 46, .14);
    --btn-fg: #272822;
    --toggle-thumb: #75715e;
}


/* ── 5. Matte Black — VS Code Default Dark+ ────────────────────── */
[data-theme="matte-black"] {
    --bg-root: #1e1e1e;
    /* vscode editor bg */
    --bg-sidebar: #252526;
    /* vscode sidebar bg */
    --bg-card: #2d2d2d;
    --bg-hover: #2a2d2e;
    --bg-active: rgba(0, 122, 204, .1);
    --bg-input: #3c3c3c;
    --accent: #007acc;
    /* vscode blue */
    --accent-light: #1b9ed8;
    --accent-glow: rgba(0, 122, 204, .14);
    --accent-dim: rgba(0, 122, 204, .45);
    --text-1: #d4d4d4;
    /* vscode fg */
    --text-2: #cccccc;
    --text-3: #808080;
    --text-label: #6d6d6d;
    --text-muted: #4e4e4e;
    --text-value: #d4d4d4;
    --border: #454545;
    --border-h: #007acc;
    --success: #4ec9b0;
    /* vscode teal */
    --warning: #dcdcaa;
    /* vscode yellow */
    --danger: #f44747;
    /* vscode red */
    --cat-header-bg: rgba(0, 122, 204, .06);
    --cat-header-border: #454545;
    --btn-fg: #ffffff;
    --toggle-thumb: #808080;
}


/* ── 6. Black-Brown — Dracula ─────────────────────────────────── */
[data-theme="black-brown"] {
    --bg-root: #282a36;
    /* dracula bg */
    --bg-sidebar: #21222c;
    /* dracula darker */
    --bg-card: #2d2f3f;
    --bg-hover: #343746;
    --bg-active: rgba(189, 147, 249, .07);
    --bg-input: #282a36;
    --accent: #bd93f9;
    /* dracula purple */
    --accent-light: #ff79c6;
    /* dracula pink */
    --accent-glow: rgba(189, 147, 249, .13);
    --accent-dim: rgba(189, 147, 249, .45);
    --text-1: #f8f8f2;
    /* dracula fg */
    --text-2: #cdd6f4;
    --text-3: #6272a4;
    /* dracula comment */
    --text-label: #4d5880;
    --text-muted: #3a4060;
    --text-value: #f8f8f2;
    --border: rgba(189, 147, 249, .18);
    --border-h: rgba(189, 147, 249, .55);
    --success: #50fa7b;
    /* dracula green */
    --warning: #f1fa8c;
    /* dracula yellow */
    --danger: #ff5555;
    /* dracula red */
    --cat-header-bg: rgba(189, 147, 249, .05);
    --cat-header-border: rgba(189, 147, 249, .15);
    --btn-fg: #282a36;
    --toggle-thumb: #6272a4;
}


/* ── 7. Jam Black — One Dark Pro ──────────────────────────────── */
[data-theme="jam-black"] {
    --bg-root: #282c34;
    /* one dark bg */
    --bg-sidebar: #21252b;
    /* one dark sidebar */
    --bg-card: #2c313a;
    --bg-hover: #323842;
    --bg-active: rgba(97, 175, 239, .07);
    --bg-input: #282c34;
    --accent: #61afef;
    /* one dark blue */
    --accent-light: #56b6c2;
    /* one dark cyan */
    --accent-glow: rgba(97, 175, 239, .12);
    --accent-dim: rgba(97, 175, 239, .4);
    --text-1: #abb2bf;
    /* one dark fg */
    --text-2: #d0d8e8;
    --text-3: #5c6370;
    /* one dark comment */
    --text-label: #4b5263;
    --text-muted: #363c49;
    --text-value: #e5c07b;
    /* one dark yellow — great for values */
    --border: rgba(97, 175, 239, .16);
    --border-h: rgba(97, 175, 239, .5);
    --success: #98c379;
    /* one dark green */
    --warning: #e5c07b;
    /* one dark yellow */
    --danger: #e06c75;
    /* one dark red */
    --cat-header-bg: rgba(97, 175, 239, .05);
    --cat-header-border: rgba(97, 175, 239, .14);
    --btn-fg: #282c34;
    --toggle-thumb: #5c6370;
}


/* ── 8. Jam Navy — Nord ───────────────────────────────────────── */
[data-theme="jam-navy"] {
    --bg-root: #2e3440;
    /* nord polar night */
    --bg-sidebar: #242933;
    --bg-card: #3b4252;
    /* nord polar night 1 */
    --bg-hover: #434c5e;
    /* nord polar night 2 */
    --bg-active: rgba(136, 192, 208, .07);
    --bg-input: #2e3440;
    --accent: #88c0d0;
    /* nord frost */
    --accent-light: #81a1c1;
    /* nord frost 2 */
    --accent-glow: rgba(136, 192, 208, .12);
    --accent-dim: rgba(136, 192, 208, .4);
    --text-1: #eceff4;
    /* nord snow storm 2 */
    --text-2: #e5e9f0;
    /* nord snow storm 1 */
    --text-3: #d8dee9;
    /* nord snow storm 0 */
    --text-label: #7b88a1;
    --text-muted: #4c566a;
    /* nord polar night 3 */
    --text-value: #eceff4;
    --border: rgba(136, 192, 208, .18);
    --border-h: rgba(136, 192, 208, .55);
    --success: #a3be8c;
    /* nord aurora green */
    --warning: #ebcb8b;
    /* nord aurora yellow */
    --danger: #bf616a;
    /* nord aurora red */
    --cat-header-bg: rgba(136, 192, 208, .05);
    --cat-header-border: rgba(136, 192, 208, .16);
    --btn-fg: #2e3440;
    --toggle-thumb: #7b88a1;
}


/* ═══════════════════════════════════════════════════════════════
   THEME MAPPING (Maps new generic theme tokens to BEW system)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="matrix"],
[data-theme="cream"],
[data-theme="matte-black"],
[data-theme="black-brown"],
[data-theme="jam-black"],
[data-theme="jam-navy"] {
    --color-primary: var(--accent);
    --color-primary-dark: var(--accent-light);
    --color-primary-light: var(--accent-glow);

    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--danger);

    --color-bg: var(--bg-root);
    --color-surface: var(--bg-card);
    --color-card: var(--bg-card);
    --color-input: var(--bg-input);
    --color-footer: var(--bg-root);

    --color-text: var(--text-1);
    --color-text-muted: var(--text-muted);
    --color-text-inverse: var(--btn-fg);

    --color-border: var(--border);
    --color-border-hover: var(--border-h);
    --color-border-subtle: var(--cat-header-border);

    --color-btn-primary: var(--accent);
    --color-btn-danger: var(--danger);
    --color-btn-orange: var(--warning);
    --color-btn-secondary: var(--bg-hover);
    --color-btn-text: var(--btn-fg);
    --color-btn-hover: var(--bg-active);

    --ring: 0 0 0 3px var(--accent-glow);

    /* Legacy aliases */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --secondary: var(--color-text-muted);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --card-bg: var(--color-card);
    --input-bg: var(--color-input);
    --footer-bg: var(--color-footer);
    --text-main: var(--color-text);
    --text-muted: var(--color-text-muted);
    --text-inverse: var(--color-text-inverse);
    --border: var(--color-border);
    --border-hover: var(--color-border-hover);
    --btn-primary: var(--color-btn-primary);
    --btn-danger: var(--color-btn-danger);
    --btn-orange: var(--color-btn-orange);
    --btn-secondary: var(--color-btn-secondary);
    --btn-text-light: var(--color-btn-text);
    --btn-hover-bg: var(--color-btn-hover);
    --btn-navy: var(--color-btn-primary);
    --btn-red: var(--color-btn-danger);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL ELEMENT THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* ── Theme-Aware Form Elements ─────────────────────────────── */
input,
select,
textarea {
    background-color: var(--color-input);
    color: var(--color-text);
    border-color: var(--color-border);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

/* ── Theme-Aware Tables ────────────────────────────────────── */
th {
    color: var(--color-text-muted);
}

td {
    color: var(--color-text);
    border-color: var(--color-border);
}

/* ── Theme-Aware Links ─────────────────────────────────────── */
a {
    color: var(--color-primary);
}

hr {
    border-color: var(--color-border);
}

/* ── Dark/Matrix Select Fix ────────────────────────────────── */
[data-theme='dark'] select option,
[data-theme='matrix'] select option {
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* ── Global Theme-Aware Scrollbar (slick + thin) ──────────── */
html {
    scrollbar-color: var(--color-border-hover) transparent;
    scrollbar-width: thin;
}

/* Slick thin scrollbars for app regions (sidebar / content) */
#app-sidebar nav,
#content-area,
.slick-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-hover) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-border-hover);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-muted);
    border: 2px solid transparent;
    background-clip: content-box;
}

/* Ultra-slick variant for the sidebar nav */
#app-sidebar nav::-webkit-scrollbar,
.slick-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#app-sidebar nav::-webkit-scrollbar-thumb,
.slick-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-border-hover);
    border: 1px solid transparent;
    background-clip: content-box;
    border-radius: var(--radius-full);
}

/* ── File Input ────────────────────────────────────────────── */
[data-theme='dark'] input[type="file"],
[data-theme='matrix'] input[type="file"] {
    color-scheme: dark;
}

input[type="file"]::file-selector-button {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    transition: var(--transition);
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
    }
}