/* ============================================
   Design Tokens — THE LOOP
   Tron Legacy aesthetic: dark, cyan neon, orange accent
   Aligned with description/07-design-tokens.md
   ============================================ */

/* Web Fonts — Rajdhani (headings) + Inter (body) */
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/rajdhani-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/rajdhani-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/rajdhani-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/rajdhani-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/inter-400.woff2') format('woff2');
}

:root {
    /* Colors — Background */
    --bg-dark: #000000;
    --bg-surface: #0D0D0D;
    --bg-elevated: #1A1A2E;
    --bg-card: rgba(13, 13, 13, 0.6);
    --bg-card-hover: rgba(0, 229, 255, 0.03);
    --backdrop-blur: blur(12px);

    /* Colors — Accent */
    --cyan: #00E5FF;
    --cyan-dim: #00A3B5;
    --cyan-muted: rgba(0, 229, 255, 0.15);
    --blue: #009DFF;
    --orange: #FF7A00;
    --orange-dim: #CC6200;
    --white-cold: #E0E8FF;
    --amber: #FFB800;
    --red-dark: #CC3333;

    /* Colors — Text */
    --text: #F2F2F2;
    --text-bright: #ffffff;
    --text-dim: #B0B0B0;
    --text-muted: #888888;

    /* Colors — Semantic */
    --success: #00FF88;
    --error: #FF4444;
    --warning: #FF7A00;

    /* Colors — Borders */
    --border: rgba(224, 232, 255, 0.2);
    --border-bright: rgba(0, 229, 255, 0.6);
    --border-orange: rgba(255, 122, 0, 0.2);
    --border-orange-bright: rgba(255, 122, 0, 0.4);

    /* Typography */
    --font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-heading: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-hero: clamp(2.5rem, 8vw, 5rem);

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

    /* Layout */
    --max-width: 1200px;
    --header-height: 64px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;

    /* Glow states — 5 interaction levels (07-design-tokens.md) */
    --glow-idle: 0 0 5px rgba(0, 229, 255, 0.3), 0 0 15px rgba(0, 229, 255, 0.15);
    --glow-hover: 0 0 8px rgba(0, 229, 255, 0.5), 0 0 25px rgba(0, 229, 255, 0.25);
    --glow-active: 0 0 12px rgba(0, 229, 255, 0.7), 0 0 40px rgba(0, 229, 255, 0.35);
    --glow-focus-outline: 2px solid #00E5FF;
    --glow-focus-offset: 2px;
    --glow-disabled: 0 0 3px rgba(0, 229, 255, 0.1);

    /* Glow states — orange variant (.card--negative) */
    --glow-idle-orange: 0 0 5px rgba(255, 122, 0, 0.3), 0 0 15px rgba(255, 122, 0, 0.15);
    --glow-hover-orange: 0 0 8px rgba(255, 122, 0, 0.5), 0 0 25px rgba(255, 122, 0, 0.25);
    --glow-active-orange: 0 0 12px rgba(255, 122, 0, 0.7), 0 0 40px rgba(255, 122, 0, 0.35);
    --glow-disabled-orange: 0 0 3px rgba(255, 122, 0, 0.1);

    /* Legacy glow aliases (used by hero, logo, nav underline) */
    --glow-cyan: 0 0 10px var(--cyan), 0 0 20px var(--cyan), 0 0 40px var(--cyan-dim);
    --glow-cyan-sm: 0 0 8px var(--cyan-dim);
    --glow-orange: 0 0 10px var(--orange), 0 0 20px var(--orange-dim);

    /* Text readability on 3D background */
    --text-shadow-body: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.5);
    --text-shadow-heading: 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.6);
    --footer-bg: rgba(0, 0, 0, 0.85);

    /* Transition timings for glow states */
    --transition-glow-in: 150ms ease-out;
    --transition-glow-out: 300ms ease-in;
}