/* MakingWaves design tokens
 *
 * Source of truth for colour, type, space, radius, motion. Imported by both
 * Electron apps and (eventually) the website. Keep this file small + flat -
 * no compound components, no logic, just the raw building blocks.
 *
 * Discord/Slack-style dark theme + vibrant orange accent.
 */

:root {
    /* ─── Surfaces (deeper for "sunset on the dance floor" overhaul) ── */
    --bg-0:           #08090c;   /* page background, deepest - deepened for colour pop */
    --bg-1:           #13151a;   /* raised surface (sidebars, top bar) */
    --bg-2:           #1c1f25;   /* card surface */
    --bg-3:           #252932;   /* hover / nested card */
    --border:         #2c3038;   /* subtle line - cards, dividers */
    --border-strong:  #3a4049;   /* form-input borders, headers */

    /* ─── Text ──────────────────────────────────────────────── */
    --text-primary:   #e7e9ee;   /* main text */
    --text-secondary: #9aa1ad;   /* secondary copy, labels */
    --text-muted:     #6b727d;   /* placeholders, disabled */
    --text-warm:      #f5f0e8;   /* warm off-white for hero / on-imagery captions */
    --text-on-accent: #1a1006;   /* dark text on orange button */

    /* ─── Primary accent: Sunset Orange ──────────────────────── */
    --accent-500:     #ff6b1a;   /* primary brand orange */
    --accent-600:     #ff7e35;   /* hover */
    --accent-700:     #e25a0a;   /* pressed */
    --accent-glow:    rgba(255, 107, 26, 0.18);
    --accent-dim:     rgba(255, 107, 26, 0.08);

    /* ─── Co-primary: Hot Magenta ────────────────────────────── */
    --hype-500:       #ff2d8b;   /* co-primary; section dividers, live pulses, Collab accent */
    --hype-600:       #ff5aa3;   /* magenta hover */
    --hype-700:       #d6207a;   /* pressed */
    --hype-glow:      rgba(255, 45, 139, 0.20);
    --hype-dim:       rgba(255, 45, 139, 0.08);

    /* ─── Tertiary energy spike: Acid Lime ───────────────────── */
    --acid-500:       #ccff00;   /* used sparingly - new badges, tempo dots */
    --acid-dim:       rgba(204, 255, 0, 0.16);

    /* Brand gradient (sunset to neon-club): use on heroes + big CTAs */
    --gradient-sunset: linear-gradient(135deg, #ff6b1a 0%, #ff2d8b 100%);
    --gradient-bedroom: linear-gradient(180deg, #08090c 0%, #1a0a14 50%, #08090c 100%);

    /* ─── Status ────────────────────────────────────────────── */
    --live:           #34d399;
    --live-dim:       rgba(52, 211, 153, 0.16);
    --warning:        #fbbf24;
    --warning-dim:    rgba(251, 191, 36, 0.16);
    --danger:         #f87171;
    --danger-dim:     rgba(248, 113, 113, 0.16);
    --info:           #60a5fa;
    --info-dim:       rgba(96, 165, 250, 0.16);

    /* ─── Type ──────────────────────────────────────────────── */
    /* Display: Bricolage Grotesque variable - 2024+ editorial display font.
       Used on hero h1s, big stats, section eyebrows. Variable axis means one
       file covers 200-800 weight + condensed width without extra payload. */
    --font-display:   'Bricolage Grotesque', 'Inter', -apple-system, system-ui, sans-serif;
    --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:      'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;

    /* Display/marketing scale (hero, lp sections). Set in clamp() at usage. */
    --fs-hero:        clamp(40px, 7vw, 88px);  --lh-hero: 1.02; --fw-hero: 800;
    --fs-display:     32px;  --lh-display: 40px; --fw-display: 600;
    --fs-h1:          24px;  --lh-h1:      32px; --fw-h1:      600;
    --fs-h2:          18px;  --lh-h2:      24px; --fw-h2:      600;
    --fs-body:        14px;  --lh-body:    20px; --fw-body:    400;
    --fs-label:       12px;  --lh-label:   16px; --fw-label:   500;
    --fs-small:       11px;  --lh-small:   14px; --fw-small:   400;

    /* ─── Spacing (4px grid) ────────────────────────────────── */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    /* ─── Radius ────────────────────────────────────────────── */
    --r-sm:    4px;
    --r-md:    8px;
    --r-lg:    12px;
    --r-xl:    16px;
    --r-full:  9999px;

    /* ─── Elevation ─────────────────────────────────────────── */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
    --glow-accent: 0 0 0 3px var(--accent-glow);

    /* ─── Motion ────────────────────────────────────────────── */
    --t-fast:    120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-normal:  200ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow:    320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Layout ────────────────────────────────────────────── */
    --sidebar-w: 240px;
    --topbar-h:  56px;
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
    background: var(--bg-0);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-body);
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); margin: 0; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); margin: 0; }

a { color: var(--accent-500); text-decoration: none; }
a:hover { color: var(--accent-600); }

/* ─── Components used by the prototypes ──────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 36px;
    padding: 0 var(--s-4);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn-primary {
    background: var(--accent-500);
    color: var(--text-on-accent);
}
.btn-primary:hover { background: var(--accent-600); }
.btn-primary:active { background: var(--accent-700); }
.btn-primary:focus-visible { box-shadow: var(--glow-accent); outline: none; }
.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-2); border-color: var(--accent-500); color: var(--accent-500); }
.btn-icon {
    width: 36px;
    padding: 0;
    justify-content: center;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    height: 22px;
    padding: 0 var(--s-2);
    border-radius: var(--r-full);
    font-size: var(--fs-label);
    font-weight: var(--fw-label);
    line-height: 1;
}
.pill-live    { background: var(--live-dim);    color: var(--live); }
.pill-warning { background: var(--warning-dim); color: var(--warning); }
.pill-danger  { background: var(--danger-dim);  color: var(--danger); }
.pill-info    { background: var(--info-dim);    color: var(--info); }
.pill-accent  { background: var(--accent-dim);  color: var(--accent-500); }

.dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: var(--r-full);
    background: currentColor;
}
.dot.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
    50%      { opacity: 0.6; box-shadow: 0 0 0 4px transparent; }
}

.card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-5);
}

.label {
    font-size: var(--fs-label);
    font-weight: var(--fw-label);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.muted { color: var(--text-secondary); }