/* Design System Variables — Cyberpunk UI */
:root {
    /* Neon Primary — electric cyan */
    --primary: #00f0ff;
    --primary-hover: #22d3ee;
    --primary-light: #7ff9ff;
    --primary-dark: #0891b2;
    --primary-deep: #083344;

    /* Neon Accent — acid yellow */
    --accent: #fcee0a;
    --accent-hover: #eab308;
    --accent-deep: #713f12;

    /* Neon Violet (replaces pink) */
    --violet: #b24bf3;
    --violet-hover: #9333ea;
    --violet-deep: #3b0764;

    /* Semantic — neon palette */
    --success: #39ff14;
    --success-hover: #22c55e;
    --danger: #ff003c;
    --danger-hover: #dc2626;
    --warning: #ffae00;
    --warning-hover: #f97316;
    --info: #00f0ff;

    /* Secondary — dark chrome */
    --secondary: #1a2340;
    --secondary-hover: #243056;

    /* Backgrounds — deep night city */
    --bg-primary: #0a0f1f;
    --bg-secondary: #05060f;
    --bg-tertiary: #12172b;
    --bg-surface: rgba(15, 23, 42, 0.72);
    --bg-glass: rgba(0, 240, 255, 0.04);
    --bg-dark: #03040a;

    /* Text */
    --text-primary: #e0f7ff;
    --text-secondary: #9bb5d1;
    --text-muted: #5b6b8a;
    --text-inverse: #05060f;
    --text-neon: #00f0ff;

    /* Borders */
    --border: rgba(0, 240, 255, 0.22);
    --border-strong: rgba(0, 240, 255, 0.55);
    --border-hover: #00f0ff;
    --border-focus: var(--primary);
    --border-violet: rgba(178, 75, 243, 0.45);

    /* Neon glows */
    --glow-cyan-sm: 0 0 6px rgba(0, 240, 255, 0.55);
    --glow-cyan: 0 0 12px rgba(0, 240, 255, 0.55), 0 0 24px rgba(0, 240, 255, 0.25);
    --glow-cyan-lg: 0 0 18px rgba(0, 240, 255, 0.75), 0 0 40px rgba(0, 240, 255, 0.35);
    --glow-violet: 0 0 14px rgba(178, 75, 243, 0.55), 0 0 32px rgba(178, 75, 243, 0.25);
    --glow-yellow: 0 0 12px rgba(252, 238, 10, 0.55), 0 0 28px rgba(252, 238, 10, 0.25);
    --glow-danger: 0 0 12px rgba(255, 0, 60, 0.6), 0 0 28px rgba(255, 0, 60, 0.25);
    --glow-success: 0 0 12px rgba(57, 255, 20, 0.55), 0 0 28px rgba(57, 255, 20, 0.25);

    /* Shadows — depth + neon rim */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 240, 255, 0.12);
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 240, 255, 0.16);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(0, 240, 255, 0.22);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 240, 255, 0.3);
    --shadow-xl: 0 28px 80px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(0, 240, 255, 0.4);

    /* Spacing — 4px grid */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Radius — mostly sharp, hint of curve */
    --radius-sm: 2px;
    --radius: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-full: 9999px;

    /* Typography — Cyberpunk display + condensed body */
    --font-family: 'Rajdhani', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Share Tech Mono', 'Fira Code', 'Consolas', monospace;

    /* Font sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.35rem;
    --text-2xl: 1.625rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;

    /* Line heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* Transitions — smooth, not stepped */
    --transition-fast: 120ms cubic-bezier(.2,.8,.2,1);
    --transition: 200ms cubic-bezier(.2,.8,.2,1);
    --transition-slow: 360ms cubic-bezier(.2,.8,.2,1);

    /* Z-index */
    --z-dropdown: 100;
    --z-modal: 200;
    --z-tooltip: 300;
    --z-toast: 400;

    /* Cyberpunk clip-paths (corner-cut bevels) */
    --clip-bevel: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
    --clip-bevel-sm: polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));
    --clip-notch: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

/* Force dark cyberpunk regardless of OS preference */
:root, html, body {
    color-scheme: dark;
}