/* ===================================
   LLOTA - Design Tokens
   Color, spacing, and typography variables
   =================================== */

:root {
    /* --- Brand Colors --- */
    --color-brand: #6E3F8D;
    --color-brand-light: #8B5FAD;
    --color-water: #0EA5E9;

    /* --- Neutral Colors (Light Mode) --- */
    --color-bg: #F8FAFC;
    --color-bg-secondary: #F1F5F9;
    --color-bg-dark: #0f172a;
    --color-text: #1e293b;
    --color-text-light: #f1f5f9;
    --color-text-secondary: #64748b;
    --color-text-tertiary: #94a3b8;

    /* --- Surface Colors (Light Mode) --- */
    --color-surface: #ffffff;
    --color-surface-light: #F8FAFC;
    --color-surface-secondary: #F1F5F9;
    --color-border: rgba(226, 232, 240, 0.8);
    --color-border-light: #E2E8F0;

    /* --- Semantic Colors --- */
    --color-success: #10B981;
    --color-success-light: #D1FAE5;
    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;
    --color-error: #EF4444;
    --color-error-light: #FEE2E2;
    --color-info: #3B82F6;
    --color-info-light: #DBEAFE;

    /* --- Interactive States (Light Mode) --- */
    --color-focus-ring: rgba(110, 63, 141, 0.1);
    --color-hover-brand: rgba(110, 63, 141, 0.05);
    --color-active-indicator: #22c55e;

    /* --- Scrollbar --- */
    --scrollbar-width: 8px;
    --scrollbar-track: #F1F5F9;
    --scrollbar-thumb: #CBD5E1;
    --scrollbar-thumb-hover: #94A3B8;

    /* --- Spacing --- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* --- Border Radius --- */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-brand: 0 4px 6px -1px rgba(110, 63, 141, 0.3);

    /* --- Typography --- */
    --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Dark Mode (Manual strictly via html.dark-mode) --- */
html.dark-mode {
    /* --- Neutral Colors (Dark Mode) --- */
    --color-bg: #0b0f19;
    --color-bg-secondary: #161f30;
    --color-bg-dark: #070a12;
    --color-text: #f8fafc;
    --color-text-light: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;

    /* --- Surface Colors (Dark Mode) --- */
    --color-surface: #151c2c;
    --color-surface-light: #0b0f19;
    --color-surface-secondary: #243047;
    --color-border: #2e3d57;
    --color-border-light: #384663;

    /* --- Interactive States (Dark Mode) --- */
    --color-focus-ring: rgba(139, 92, 246, 0.35);
    --color-hover-brand: rgba(139, 92, 246, 0.2);

    /* --- Scrollbar (Dark Mode) --- */
    --scrollbar-track: #151c2c;
    --scrollbar-thumb: #475569;
    --scrollbar-thumb-hover: #64748b;
}