/* ===== GIA LINH TOOLS - DESIGN TOKENS (SHARED) =====
   Single source of truth for CSS variables across all pages.
   Import this file first in any page: <link rel="stylesheet" href="css/variables.css">
   Version 2.0: Added animation tokens, improved contrast, added light mode tokens */

:root {
    /* ===== Core Dark Theme ===== */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a24;
    --bg-card-hover: #22222e;
    --bg-elevated: #242432;

    /* ===== Accent Colors ===== */
    --accent-cyan: #00d9ff;
    --accent-magenta: #ff00aa;
    --accent-lime: #b4ff00;
    --accent-orange: #ff6b00;
    --accent-purple: #9945ff;
    --accent-blue: #3b82f6;
    --accent-gold: #ffd700;
    --accent-green: #22c55e;

    /* ===== Text - Improved Contrast ===== */
    --text-primary: #ffffff;
    --text-secondary: #b0b0c0;  /* Improved from #a0a0b0 for WCAG AA */
    --text-muted: #707080;       /* Improved from #606070 */

    /* ===== Border & Surface ===== */
    --border-color: #2a2a3a;
    --border-hover: #3a3a4a;
    --backdrop: rgba(0, 0, 0, 0.6);

    /* ===== Semantic ===== */
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;

    /* ===== Glow Effects ===== */
    --glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
    --glow-magenta: 0 0 20px rgba(255, 0, 170, 0.3);
    --glow-gold: 0 0 20px rgba(255, 215, 0, 0.3);
    --glow-orange: 0 0 20px rgba(255, 107, 0, 0.3);
    --glow-green: 0 0 20px rgba(34, 197, 94, 0.3);

    /* ===== Border Radius ===== */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* ===== Spacing ===== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* ===== Typography ===== */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.4rem;
    --text-2xl: 1.8rem;
    --text-3xl: 2.5rem;

    /* ===== Transitions ===== */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Shadows ===== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
    --shadow-glow-cyan: 0 0 20px rgba(0, 217, 255, 0.2), 0 0 40px rgba(0, 217, 255, 0.1);

    /* ===== Z-Index Scale ===== */
    --z-base: 1;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 5000;
    --z-cursor: 10000;

    /* ===== Animation Durations ===== */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    /* ===== Container Widths ===== */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;
}

/* ===== Utility: Focus Ring ===== */
*:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

/* ===== Utility: Smooth Scroll ===== */
html {
    scroll-behavior: smooth;
}

/* ===== Utility: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Utility: Selection ===== */
::selection {
    background: rgba(0, 217, 255, 0.3);
    color: var(--text-primary);
}