/* ===========================================================================
   CyberSee — Design Tokens
   ─────────────────────────
   Contains ONLY token declarations:
     • :root         – shared name placeholders (no values)
     • :root / light – light-theme values
     • dark          – dark-theme values
     • Token bridges – --cs-* ← --brand-* mappings
     • Scrollbar tokens
   NO component or page styles live here.
   =========================================================================== */


/* ============================================================================
   0) SHARED NAMES (tokens, no values) — keep names stable for both themes
============================================================================ */

:root {
    --font-base: "SpaceGrotesk", sans-serif;
    /* Base font family */
    --sidebar-width: 280px;
    /* Sidebar expanded width */
    --sidebar-collapsed-width: 68px;
    /* Sidebar collapsed width */

    /* Brand scale placeholders (values set per theme) */
    --brand-primary: 0;
    --brand-primary-50: 0;
    --brand-primary-100: 0;
    --brand-primary-200: 0;
    --brand-primary-300: 0;
    --brand-primary-400: 0;
    --brand-primary-500: 0;
    --brand-primary-600: 0;
    --brand-primary-700: 0;
    --brand-primary-800: 0;
    --brand-primary-900: 0;

    /* Neutral & surface system (values set per theme) */
    --brand-bg: 0;
    /* App/page background */
    --brand-fg: 0;
    /* Primary text color */
    --brand-muted: 0;
    /* Secondary text / helpers */
    --brand-border: 0;
    /* Divider/border color */
    --brand-elev: 0;
    /* Surface 1 (cards, sheets) */
    --brand-elev-2: 0;
    /* Surface 2 (headers, modals) */
    --brand-sidebar-bg: 0;
    /* Sidebar background */
    --brand-sidebar-fg: 0;
    /* Sidebar text/icons */
    --brand-card-bg: 0;
    /* Card background */

    /* Semantic statuses */
    --brand-success: 0;
    --brand-success-600: 0;
    --brand-warning: 0;
    --brand-warning-600: 0;
    --brand-danger: 0;
    --brand-danger-600: 0;
    --brand-info: 0;
    --brand-info-600: 0;

    /* Risk severity levels */
    --brand-risk-critical: 0;
    --brand-risk-high: 0;
    --brand-risk-medium: 0;
    --brand-risk-low: 0;

    /* Extended text colors */
    --brand-text-secondary: 0;
    --brand-text-tertiary: 0;
    --brand-link: 0;
    --brand-link-hover: 0;

    /* Effects */
    --brand-shadow: 0;
    --brand-focus-ring: 0;

    /* Dashboard accents (module-specific) */
    --card-bg: 0;
    --keyword-accent: 0;
    --domain-accent: 0;
    --email-accent: 0;
    --username-accent: 0;
    --cases-accent: 0;
    --pending-cases-accent: 0;
    --progress-cases-accent: 0;
    --fixed-cases-accent: 0;
    --takedown-accent: 0;
    --pending-takedown-accent: 0;
    --progress-takedown-accent: 0;
    --fixed-takedown-accent: 0;

    /* Selects */
    --select-bg: 0;
    --select-border: 0;
    --select-fg: 0;
    --select-arrow-svg: 0;

    --app-bg: 0;
    /* Alias for page bg */
}


/* ============================================================================
   1) LIGHT THEME — glare-reduced, comfortable neutrals, crisp borders
============================================================================ */

:root,
html[data-bs-theme="light"] {
    /* -------- Primary (base = #4C0EE5) -------- */
    --brand-primary: #4C0EE5;
    /* Main brand hue */
    --brand-primary-50: #F5F3FF;
    /* Subtle backgrounds, chips */
    --brand-primary-100: #ECE7FF;
    /* Hover fills on subtle UI */
    --brand-primary-200: #DCD1FF;
    /* Selected states (quiet) */
    --brand-primary-300: #C2B0FF;
    /* Light badges */
    --brand-primary-400: #A488FF;
    /* Links on hover (alt) */
    --brand-primary-500: #7F5BFF;
    /* Medium emphasis */
    --brand-primary-600: #5E2FEF;
    /* Hover/active on brand */
    --brand-primary-700: #4C0EE5;
    /* Brand buttons/links */
    --brand-primary-800: #3A0CB4;
    /* Focus outlines alt */
    --brand-primary-900: #2A0885;
    /* High-contrast text on brand */

    /* -------- Neutrals (comfort tune) -------- */
    --brand-bg: #F4F6F9;
    /* App/page bg (reduced glare) */
    --brand-fg: #0F172A;
    /* Primary text (≈ Slate-900) */
    --brand-muted: #667085;
    /* Secondary text/icons */
    --brand-border: rgba(2, 6, 23, 0.10);
    /* Hairline borders (1:0.10) */
    --brand-elev: #FFFFFF;
    /* Surface 1 (cards, tables) */
    --brand-elev-2: #FAFBFF;
    /* Surface 2 (headers, sheets) */

    /* -------- Semantics -------- */
    --brand-success: #22C55E;
    /* Success bg */
    --brand-success-600: #16A34A;
    /* Success text/hover */
    --brand-warning: #F59E0B;
    /* Warning bg */
    --brand-warning-600: #D97706;
    /* Warning text/hover */
    --brand-danger: #EF4444;
    /* Error bg */
    --brand-danger-600: #DC2626;
    /* Error text/hover */
    --brand-info: #0EA5E9;
    /* Info bg */
    --brand-info-600: #0284C7;
    /* Info text/hover */

    /* -------- Risk Severity Levels -------- */
    --brand-risk-critical: #DC2626;
    /* Critical = solid danger */
    --brand-risk-high: #EA580C;
    /* High = orange */
    --brand-risk-medium: #CA8A04;
    /* Medium = amber/yellow */
    --brand-risk-low: #16A34A;
    /* Low = success green */

    /* -------- Extended Text Colors -------- */
    --brand-text-secondary: #64748B;
    /* Slate-500 */
    --brand-text-tertiary: #94A3B8;
    /* Slate-400 */
    --brand-link: #3B82F6;
    /* Blue-500 */
    --brand-link-hover: #2563EB;
    /* Blue-600 */

    /* -------- Component specifics -------- */
    --brand-sidebar-bg: #FFFFFF;
    /* Sidebar surface */
    --brand-sidebar-fg: #475569;
    /* Sidebar icons/labels */
    --brand-card-bg: var(--brand-elev);

    /* -------- Effects -------- */
    --brand-shadow: 0 10px 28px rgba(2, 6, 23, .06);
    /* Soft elevation */
    --brand-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 28%, transparent);

    /* -------- Dashboard tokens -------- */
    --card-bg: hsla(220, 20%, 98%, 1);
    /* Panels behind widgets */

    --keyword-accent: #16A34A;
    /* "Keywords" chip/border */
    --domain-accent: #0369A1;
    /* Domain labels/links */
    --email-accent: #C2410C;
    /* Email markers/badges */
    --username-accent: #7E22CE;
    /* Username markers */

    --cases-accent: #475569;
    /* Neutral cases count */
    --pending-cases-accent: #CA8A04;
    /* Pending status */
    --progress-cases-accent: #0891B2;
    /* In-progress status */
    --fixed-cases-accent: #65A30D;
    /* Resolved status */

    --takedown-accent: #0F766E;
    --pending-takedown-accent: #B45309;
    --progress-takedown-accent: #1E40AF;
    --fixed-takedown-accent: #BE185D;

    /* -------- Selects (comfortable contrast) -------- */
    --select-bg: #FFFFFF;
    /* Field bg */
    --select-border: rgba(2, 6, 23, 0.18);
    /* Field border */
    --select-fg: #0F172A;
    /* Text color */
    --select-arrow-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23647085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

    /* -------- Bootstrap bridge (light) -------- */
    --bs-body-bg: var(--brand-bg);
    --bs-body-color: var(--brand-fg);
    --bs-border-color: var(--brand-border);
    --bs-card-bg: var(--brand-card-bg);
    --bs-card-border-color: var(--brand-border);
    --bs-sidebar-bg: var(--brand-sidebar-bg);
    --bs-sidebar-color: var(--brand-sidebar-fg);
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 76, 14, 229;
    /* #4C0EE5 */
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-600);
    --bs-success: var(--brand-success);
    --bs-warning: var(--brand-warning);
    --bs-danger: var(--brand-danger);
    --bs-info: var(--brand-info);
    --bs-muted: var(--brand-muted);

    --app-bg: var(--brand-bg);

    /* -------- Legacy/custom system tokens (kept for parity) -------- */
    --cs-bg: #F4F6F9;
    /* Matches page bg */
    --cs-text: #0B1324;
    /* High-contrast text */
    --cs-muted: #5B6474;
    /* Secondary text */
    --cs-border: rgba(2, 6, 23, .12);
    /* Dividers */
    --cs-card: rgba(255, 255, 255, .96);
    /* Translucent card */
    --cs-shadow: 0 18px 48px rgba(2, 6, 23, .10);
}


/* ============================================================================
   2) DARK THEME
============================================================================ */

html[data-bs-theme="dark"] {
    /* Primary scale (dark-friendly) */
    --brand-primary: #4C0EE5;
    --brand-primary-50: #2A2350;
    --brand-primary-100: #342A66;
    --brand-primary-200: #40327F;
    --brand-primary-300: #5239A6;
    --brand-primary-400: #6B46D9;
    --brand-primary-500: #825BFF;
    --brand-primary-600: #9C7DFF;
    --brand-primary-700: #B8A4FF;
    --brand-primary-800: #D6CBFF;
    --brand-primary-900: #EEE8FF;

    /* Neutrals (dark) */
    --brand-bg: #0F1319;
    --brand-fg: #E5E7EB;
    --brand-muted: #9CA3AF;
    --brand-border: rgba(255, 255, 255, .10);
    --brand-elev: #121721;
    --brand-elev-2: #151B24;

    /* Semantics (bright for dark) */
    --brand-success: #22C55E;
    --brand-success-600: #16A34A;
    --brand-warning: #FBBF24;
    --brand-warning-600: #F59E0B;
    --brand-danger: #F87171;
    --brand-danger-600: #EF4444;
    --brand-info: #38BDF8;
    --brand-info-600: #0EA5E9;

    /* Risk Severity Levels (dark) */
    --brand-risk-critical: #EF4444;
    --brand-risk-high: #F97316;
    --brand-risk-medium: #EAB308;
    --brand-risk-low: #22C55E;

    /* Extended Text Colors (dark) */
    --brand-text-secondary: #9CA3AF;
    --brand-text-tertiary: #6B7280;
    --brand-link: #60A5FA;
    --brand-link-hover: #93C5FD;

    /* Components */
    --brand-sidebar-bg: #0F1319;
    --brand-sidebar-fg: #CBD5E1;
    --brand-card-bg: var(--brand-elev);

    /* Effects */
    --brand-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    --brand-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 45%, transparent);

    /* Dashboard */
    --card-bg: hsla(224, 66%, 8%, 1);

    /* Accents (consistent across themes) */
    --keyword-accent: #22C55E;
    --domain-accent: #0284C7;
    --email-accent: #F97316;
    --username-accent: #A855F7;

    --cases-accent: #64748B;
    --pending-cases-accent: #EAB308;
    --progress-cases-accent: #06B6D4;
    --fixed-cases-accent: #84CC16;

    --takedown-accent: #0D9488;
    --pending-takedown-accent: #F59E0B;
    --progress-takedown-accent: #2563EB;
    --fixed-takedown-accent: #EC4899;

    /* Selects (dark) */
    --select-bg: var(--dark-surface-2, #2A2D3A);
    --select-border: var(--dark-border, rgba(255, 255, 255, .15));
    --select-fg: #FFFFFF;
    --select-arrow-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

    /* Bootstrap bridge (dark) */
    --bs-body-bg: var(--brand-bg);
    --bs-body-color: var(--brand-fg);
    --bs-border-color: var(--brand-border);
    --bs-card-bg: var(--brand-card-bg);
    --bs-card-border-color: var(--brand-border);
    --bs-sidebar-bg: var(--brand-sidebar-bg);
    --bs-sidebar-color: var(--brand-sidebar-fg);
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 76, 14, 229;
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-600);
    --bs-success: var(--brand-success);
    --bs-warning: var(--brand-warning);
    --bs-danger: var(--brand-danger);
    --bs-info: var(--brand-info);
    --bs-muted: var(--brand-muted);

    --app-bg: var(--brand-bg);

    /* Custom system tokens (kept) */
    --cs-primary: #4C0EE5;
    --cs-primary-2: #00E5FF;
    --cs-bg: #0B1224;
    --cs-text: #E6EEF8;
    --cs-muted: #9AA3B2;
    --cs-border: rgba(255, 255, 255, .12);
    --cs-card: rgba(16, 22, 35, .78);
    --cs-rad: 18px;
    --cs-shadow: 0 24px 64px rgba(0, 0, 0, .4);
    --success: #22C55E;
    --info: #0EA5E9;
}


/* ============================================================================
   3) SCROLLBAR TOKENS
============================================================================ */

/* Light theme = black thumb */
:root,
html[data-bs-theme="light"] {
    --scroll-track: var(--brand-elev, #ffffff);
    --scroll-thumb: #0f0f0f;
    /* black */
    --scroll-thumb-hover: #000000;
    --scroll-thumb-active: #1a1a1a;
    --scrollbar-size: 12px;
}

/* Dark theme = white thumb */
html[data-bs-theme="dark"] {
    --scroll-track: var(--brand-elev, #121721);
    --scroll-thumb: #ffffff;
    /* white */
    --scroll-thumb-hover: #ffffff;
    --scroll-thumb-active: #e9e9e9;
    --scrollbar-size: 12px;
}

/* Marketplace dropdown scroll tokens */
:root,
html[data-bs-theme="light"] {
    --scroll-track: var(--brand-elev);
}

html[data-bs-theme="dark"] {
    --scroll-track: var(--brand-elev);
}


/* ============================================================================
   4) BANNER & TOOLTIP TOKENS
============================================================================ */

:root {
    --cs-primary: #4C0EE5;
    --cs-info: #0EA5E9;
    --cs-danger: #F59E0B;
    /* amber-ish warning for better contrast on dark */
    --cs-bg-elev: var(--brand-elev, #121721);
    --cs-border: rgba(255, 255, 255, .12);
    --cs-text: var(--brand-fg, #E5E7EB);
}

html[data-bs-theme='light'] {
    --cs-bg-elev: var(--brand-elev, #ffffff);
    --cs-border: rgba(2, 6, 23, .12);
    --cs-text: var(--brand-fg, #0B1324);
}


/* ============================================================================
   5) TOKEN BRIDGE — --cs-* from --brand-*
   Ensures legacy --cs-* consumers always resolve through brand system
============================================================================ */

:root {
    --cs-primary: var(--brand-primary, var(--bs-primary, #4C0EE5));
    --cs-success: var(--brand-success, var(--bs-success, #22c55e));
    --cs-fg: var(--brand-fg, var(--bs-body-color, #e6e8ee));
    --cs-bg: var(--brand-elev, var(--bs-card-bg, #121721));
    --cs-bg-2: var(--brand-elev-2, color-mix(in srgb, var(--bs-body-bg, #0e1320) 88%, #fff 12%));
    --cs-border: var(--brand-border, var(--bs-border-color, rgba(148, 163, 184, .18)));
    --cs-shadow: var(--brand-shadow, 0 24px 60px rgba(0, 0, 0, .35));
    --cs-muted: var(--brand-muted, #9ca3af);
}

/* Light tweaks when app theme is light */
html[data-bs-theme="light"] {
    --cs-fg: var(--brand-fg, var(--bs-body-color, #0f172a));
    --cs-bg: var(--brand-elev, var(--bs-card-bg, #ffffff));
    --cs-bg-2: var(--brand-elev-2, #f8fafc);
    --cs-border: var(--brand-border, var(--bs-border-color, rgba(2, 6, 23, .10)));
}