/**
 * ═══════════════════════════════════════════════════════════════════
 *  DESIGN TOKEN SYSTEM
 *  Single source of truth for all color, shadow, and theme variables.
 *
 *  Architecture (Nathan Curtis / EightShapes methodology):
 *    1. PRIMITIVES  — Raw named color values (never used directly in components)
 *    2. SEMANTICS   — Role-based tokens that map to primitives per theme
 *    3. BS5 BRIDGE  — Maps semantic tokens → Bootstrap 5 CSS variables
 *
 *  Rules:
 *    - Components ONLY reference semantic tokens (--surface-*, --text-*, etc.)
 *    - Never reference a primitive directly in a component rule
 *    - Dark mode changes semantic token values, not component rules
 * ═══════════════════════════════════════════════════════════════════
 */

 
/* ── 1. PRIMITIVE SCALE ─────────────────────────────────────────── */
/* Cool Blue-Gray neutrals — 9 steps, harmonious with violet accent  */
:root {
    /* Neutrals */
    --n-0: #ffffff;
    --n-50: #f4f6fb;
    --n-100: #eceef5;
    --n-200: #d4d8ea;
    --n-300: #b0b6cc;
    --n-400: #8890a8;
    --n-600: #444d6a;
    --n-800: #1b2035;
    --n-900: #11162a;
    --n-950: #080c18;

    /* Violet — interactive accent */
    --violet-300: #c4b5fd;
    --violet-400: #8b9aff;
    --violet-500: #5a70f0;
    --violet-600: #4557d4;
    --violet-700: #7147a3;

    /* Amber — brand highlight (same in both modes) */
    --amber-400: #f5c518;
    --amber-300: #ffd050;
    --amber-glow: rgba(245, 197, 24, 0.15);

    /* Semantic accent glow for hover backgrounds */
    --violet-glow-light: rgba(90, 112, 240, 0.10);
    --violet-glow-dark: rgba(139, 154, 255, 0.15);

    /* Status colors */
    --danger-500: #ef4444;
    --danger-400: #f87171;
    --success-500: #22c55e;

    /* Motion — easing curves & shimmer (shared across components) */
    --ag-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ag-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ag-shimmer-base: rgba(255, 255, 255, 0.05);
    --ag-shimmer-glow: rgba(255, 255, 255, 0.08);
}


/* ── 2a. SEMANTIC TOKENS — NAVY MODE (Global Default) ───────────── */
:root,
html[data-theme="navy"],
html[data-theme="dark"] {
    color-scheme: dark;

    /* Backgrounds — Classic The Ripper Navy */
    --surface-page: rgb(34, 40, 68);
    /* Signature Background        */
    --surface-raised: rgb(34, 40, 68);
    /* Unified with page           */
    --surface-overlay: rgba(255, 255, 255, 0.05);
    /* Subtle overlay      */
    --surface-inset: rgba(0, 0, 0, 0.2);
    --sidebar-bg: rgb(34, 40, 68);
    --topbar-bg: rgb(34, 40, 68);

    /* Text */
    --text-primary: #eef0f7;
    --text-muted: #aab2d1;
    --text-disabled: #5c6382;
    --text-interactive: var(--violet-400);
    --text-on-accent: var(--n-0);

    /* Borders */
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);
    --border-focus: var(--violet-400);

    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 4px var(--shadow-color);
    --shadow-md: 0 4px 20px var(--shadow-color);
    --shadow-lg: 0 8px 40px var(--shadow-color);

    /* Accents */
    --accent-primary: var(--violet-400);
    --accent-secondary: var(--violet-300);
    --accent-glow: var(--violet-glow-dark);
    --highlight: var(--violet-400);
    --highlight-muted: var(--violet-300);
    --highlight-glow: var(--violet-glow-dark);

    /* Legacy compat aliases */
    --bg-primary: var(--surface-page);
    --bg-secondary: var(--surface-raised);
    --bg-topbar: var(--topbar-bg);
    --card-bg: var(--surface-raised);
}


/* ── 2b. SEMANTIC TOKENS — LIGHT MODE (Pure White) ──────────────── */
html[data-theme="light"] {
    color-scheme: light;

    /* Backgrounds */
    --surface-page: #ffffff;
    /* Pure White                  */
    --surface-raised: #ffffff;
    --surface-overlay: #f0f2f5;
    --surface-inset: #f8f9fa;
    --sidebar-bg: #ffffff;
    --topbar-bg: #ffffff;

    /* Text types */
    --text-primary: #1c1e21;
    --text-muted: #65676b;
    --text-disabled: #8b90a0;
    --text-interactive: var(--violet-500);
    --text-on-accent: var(--n-0);

    /* Borders */
    --border-default: #e4e6eb;
    --border-strong: #ced0d4;
    --border-focus: var(--violet-500);

    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 2px var(--shadow-color);
    --shadow-md: 0 4px 12px var(--shadow-color);
    --shadow-lg: 0 8px 24px var(--shadow-color);

    /* Accents */
    --accent-primary: var(--violet-500);
    --accent-secondary: var(--violet-700);
    --accent-glow: var(--violet-glow-light);
    --highlight: var(--violet-500);
    --highlight-muted: var(--violet-700);
    --highlight-glow: var(--violet-glow-light);

    /* Legacy compat aliases */
    --bg-primary: var(--surface-page);
    --bg-secondary: var(--surface-raised);
    --bg-topbar: var(--topbar-bg);
    --card-bg: var(--surface-raised);
}


/* ── 2c. SEMANTIC TOKENS — BLACK MODE (JetBrains Gray / Dark) ───── */
html[data-theme="black"] {
    color-scheme: dark;

    /* Backgrounds — #2b2b2b / rgb(43,43,43) */
    --surface-page: rgb(43, 43, 43);
    /* Main Gray Canvas            */
    --surface-raised: rgb(43, 43, 43);
    /* Unified with page           */
    --surface-overlay: rgba(255, 255, 255, 0.05);
    /* Subtle overlay      */
    --surface-inset: rgba(0, 0, 0, 0.2);
    --sidebar-bg: rgb(43, 43, 43);
    --topbar-bg: rgb(43, 43, 43);

    /* Text */
    --text-primary: #cfd3d7;
    /* Standard Gray Text          */
    --text-muted: #919191;
    /* Muted Gray Text             */
    --text-disabled: #606060;
    --text-interactive: var(--violet-400);
    --text-on-accent: var(--n-0);

    /* Borders */
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-focus: var(--violet-400);

    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px var(--shadow-color);
    --shadow-md: 0 4px 12px var(--shadow-color);
    --shadow-lg: 0 12px 32px var(--shadow-color);

    /* Accents */
    --accent-primary: var(--violet-400);
    --accent-secondary: var(--violet-300);
    --accent-glow: rgba(139, 154, 255, 0.1);
    --highlight: var(--violet-400);
    --highlight-muted: var(--violet-300);
    --highlight-glow: rgba(139, 154, 255, 0.1);

    /* Legacy compat aliases */
    --bg-primary: var(--surface-page);
    --bg-secondary: var(--surface-raised);
    --bg-topbar: var(--topbar-bg);
    --card-bg: var(--surface-raised);
}


/* ── 3. BOOTSTRAP 5 VARIABLE BRIDGE ─────────────────────────────── */
/* Maps our semantic tokens → BS5 CSS variables so BS5 components    */
/* auto-adapt without any extra overrides needed in markup            */
:root,
html[data-theme="light"],
html[data-theme="navy"],
html[data-theme="black"],
html[data-theme="dark"] {
    --bs-font-sans-serif: "InterRoman", "Segoe UI", system-ui, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--surface-page);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-bg: var(--surface-overlay);
    --bs-border-color: var(--border-default);
    --bs-border-color-translucent: var(--border-default);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
    --bs-box-shadow: var(--shadow-md);
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow-lg: var(--shadow-lg);

    /* Primary = our violet accent */
    --bs-primary: var(--accent-primary);
    --bs-primary-rgb: 90, 112, 240;
    --bs-link-color: var(--text-interactive);
    --bs-link-hover-color: var(--accent-secondary);
    --bs-focus-ring-color: rgba(90, 112, 240, 0.25);
    --bs-emphasis-color: var(--text-primary);

    /* Warning = amber highlight */
    --bs-warning: var(--highlight);
    --bs-warning-rgb: 245, 197, 24;

    /* Danger */
    --bs-danger: var(--danger-500);

    /* Cards */
    --bs-card-bg: var(--surface-raised);
    --bs-card-border-color: var(--border-default);
    --bs-card-cap-bg: var(--surface-overlay);

    /* Dropdown */
    --bs-dropdown-bg: var(--surface-raised);
    --bs-dropdown-border-color: var(--border-default);
    --bs-dropdown-link-color: var(--text-primary);
    --bs-dropdown-link-hover-color: var(--text-primary);
    --bs-dropdown-link-hover-bg: var(--surface-overlay);
    --bs-dropdown-divider-bg: var(--border-default);
    --bs-dropdown-header-color: var(--text-muted);

    /* Form inputs */
    --bs-form-control-bg: var(--surface-raised);
    --bs-form-control-border-color: var(--border-strong);
    --bs-form-control-focus-border-color: var(--border-focus);
    --bs-form-control-color: var(--text-primary);

    /* Navbar (used by topbar equivalent) */
    --bs-navbar-color: var(--text-primary);
    --bs-navbar-active-color: var(--accent-primary);

    /* Modal */
    --bs-modal-bg: var(--surface-raised);
    --bs-modal-border-color: var(--border-default);
    --bs-modal-header-border-color: var(--border-default);
    --bs-modal-footer-border-color: var(--border-default);
}

/* Dark-mode specific BS5 secondary color RGB (used in BS5 opacity utilities) */
html[data-theme="navy"],
html[data-theme="black"],
html[data-theme="dark"] {
    --bs-secondary-color-rgb: 136, 144, 168;
    --bs-primary-rgb: 139, 154, 255;
}


/* ── 4. UTILITY CLASSES ──────────────────────────────────────────── */
/* Semantic utility classes — use these in HTML instead of BS5 raw   */

.bg-surface-page {
    background: var(--surface-page) !important;
}

.bg-surface-raised {
    background: var(--surface-raised) !important;
}

.bg-surface-overlay {
    background: var(--surface-overlay) !important;
}

.bg-surface-inset {
    background: var(--surface-inset) !important;
}

.bg-app {
    background: var(--surface-page) !important;
}

.bg-card-app {
    background: var(--surface-raised) !important;
}

.text-app {
    color: var(--text-primary) !important;
}

.text-app-muted {
    color: var(--text-muted) !important;
}

.text-app-interactive {
    color: var(--text-interactive) !important;
}

.text-highlight {
    color: var(--highlight) !important;
}

.hover-text-highlight:hover {
    color: var(--highlight) !important;
}

.border-app {
    border-color: var(--border-default) !important;
}

.border-app-strong {
    border-color: var(--border-strong) !important;
}

.shadow-app-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-app-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-app-lg {
    box-shadow: var(--shadow-lg) !important;
}