/**
 * Chronolexografie Color Palettes
 * All three palettes are stored here and can be switched by changing the active mapping
 */

:root {
    /* ===== PALETTE 1: Electric Blue Accent ===== */
    --palette-1-black: #0A0A0A;
    --palette-1-dark: #2D2D2D;
    --palette-1-mid: #525252;
    --palette-1-light: #A0A0A0;
    --palette-1-lighter: #D4D4D4;
    --palette-1-white: #F5F5F5;
    --palette-1-blue-primary: #00A9E0;
    --palette-1-blue-electric: #0080FF;
    --palette-1-blue-glow: #4DC3FF;

    /* ===== PALETTE 2: Neon Azure ===== */
    --palette-2-black: #0D0D0D;
    --palette-2-dark: #333333;
    --palette-2-mid: #666666;
    --palette-2-light: #999999;
    --palette-2-lighter: #CCCCCC;
    --palette-2-white: #F0F0F0;
    --palette-2-blue-primary: #0099FF;
    --palette-2-blue-electric: #00CCFF;
    --palette-2-blue-glow: #0066CC;

    /* ===== PALETTE 3: Government Tech (Softer) ===== */
    --palette-3-black: #1A1A1A;
    --palette-3-dark: #404040;
    --palette-3-mid: #707070;
    --palette-3-light: #B0B0B0;
    --palette-3-lighter: #E0E0E0;
    --palette-3-white: #FAFAFA;
    --palette-3-blue-primary: #0088CC;
    --palette-3-blue-electric: #33AAFF;
    --palette-3-blue-glow: #0066AA;

    /* ===== ACTIVE PALETTE (Change mapping to switch palettes) ===== */
    /* Currently using Palette 1: Electric Blue Accent */
    --color-black: var(--palette-1-black);
    --color-dark: var(--palette-1-dark);
    --color-mid: var(--palette-1-mid);
    --color-light: var(--palette-1-light);
    --color-lighter: var(--palette-1-lighter);
    --color-white: var(--palette-1-white);
    --color-blue-primary: var(--palette-1-blue-primary);
    --color-blue-electric: var(--palette-1-blue-electric);
    --color-blue-glow: var(--palette-1-blue-glow);

    /* ===== ADDITIONAL DESIGN TOKENS ===== */
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Courier New', monospace;

    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Borders & Shadows */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Animation */
    --transition-fast: 150ms ease-out;
    --transition-normal: 300ms ease-out;
    --transition-slow: 500ms ease-out;

    /* Breakpoints (for reference in media queries) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* Layout */
    --container-max-width: 1200px;
    --content-max-width: 800px;
}

/* Alternative palette switching via data attribute */
[data-palette="2"] {
    --color-black: var(--palette-2-black);
    --color-dark: var(--palette-2-dark);
    --color-mid: var(--palette-2-mid);
    --color-light: var(--palette-2-light);
    --color-lighter: var(--palette-2-lighter);
    --color-white: var(--palette-2-white);
    --color-blue-primary: var(--palette-2-blue-primary);
    --color-blue-electric: var(--palette-2-blue-electric);
    --color-blue-glow: var(--palette-2-blue-glow);
}

[data-palette="3"] {
    --color-black: var(--palette-3-black);
    --color-dark: var(--palette-3-dark);
    --color-mid: var(--palette-3-mid);
    --color-light: var(--palette-3-light);
    --color-lighter: var(--palette-3-lighter);
    --color-white: var(--palette-3-white);
    --color-blue-primary: var(--palette-3-blue-primary);
    --color-blue-electric: var(--palette-3-blue-electric);
    --color-blue-glow: var(--palette-3-blue-glow);
}