/* Livevane — cyberpunk global palette, backdrop, and base styles */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    color-scheme: dark;

    /* backgrounds */
    --cp-bg: #050213;
    --cp-bg-accent: #0a072c;
    --cp-panel: rgba(10, 14, 40, 0.92);
    --cp-panel-strong: rgba(10, 20, 52, 0.96);
    --cp-panel-alt: #111732;
    --cp-panel-alt-strong: #181f43;
    --cp-card: rgba(12, 18, 52, 0.92);
    --cp-card-strong: rgba(17, 23, 50, 0.92);
    --cp-surface: rgba(8, 12, 32, 0.9);
    --cp-overlay: rgba(1, 1, 10, 0.92);
    --cp-overlay-alt: rgba(4, 6, 18, 0.95);

    /* brand colors */
    --cp-primary: #ff4fd8;
    --cp-secondary: #23d9ff;
    --cp-primary-rgb: 255, 79, 216;
    --cp-secondary-rgb: 35, 217, 255;
    --cp-accent: #f8ff72;
    --cp-accent-rgb: 248, 255, 114;

    /* named neons */
    --cp-pink: #f72585;
    --cp-cyan: #08f7fe;
    --cp-purple: #7c3aed;
    --cp-amber: #ffb347;
    --cp-green: #6ee7b7;

    /* semantic */
    --cp-danger: #ff5f5f;
    --cp-danger-rgb: 255, 95, 95;
    --cp-success: #66ffb1;
    --cp-success-rgb: 102, 255, 177;
    --cp-warning: #ffd691;
    --cp-info: #8ad8ff;

    /* borders */
    --cp-border: rgba(35, 217, 255, 0.4);
    --cp-border-strong: rgba(255, 79, 216, 0.65);
    --cp-border-hot: rgba(242, 73, 200, 0.5);

    /* text */
    --cp-text: #f8fbff;
    --cp-muted: #9db8dd;
    --cp-muted-strong: #7c8bc2;

    /* effects */
    --cp-grid: rgba(255, 79, 216, 0.08);
    --cp-glow: 0 0 30px rgba(35, 217, 255, 0.45);
    --cp-soft-glow: rgba(242, 73, 200, 0.25);
    --cp-cool-glow: rgba(17, 205, 227, 0.28);

    /* textures */
    --cp-texture: url('/assets/cyberpunk/cyberpunk-panel-texture-bright.webp');
    --cp-hero: url('/assets/cyberpunk/cyberpunk-hero-public.webp');
    --cp-hero-live: url('/assets/cyberpunk/cyberpunk-hero-live.webp');
}

html { background-color: var(--cp-bg); }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--cp-text);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    background-color: var(--cp-bg);
    background-image:
        radial-gradient(circle at 18% 15%, rgba(var(--cp-secondary-rgb), 0.28), transparent 60%),
        radial-gradient(circle at 82% -5%, rgba(var(--cp-primary-rgb), 0.22), transparent 50%),
        repeating-linear-gradient(0deg, transparent, transparent 26px, var(--cp-grid) 26px, var(--cp-grid) 27px),
        linear-gradient(180deg, rgba(5,2,19,0.72), rgba(5,2,19,0.62)),
        var(--cp-hero);
    background-size: 120% 120%, 120% 120%, 6px 6px, 100% 100%, cover;
    background-attachment: fixed, fixed, fixed, fixed, fixed;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cp-cyan);
    outline-offset: 2px;
}

button:hover:not(:disabled) { filter: brightness(1.08); }