/* =============== DESIGN TOKENS ===============
   Site-wide design tokens for Echo Studio LA.
   Import this file BEFORE site.css so tokens are available everywhere.
   ============================================== */

:root {
    /* --- Color: accents --- */
    --color-accent: #7B61FF;           /* primary: vibrant purple-violet */
    --color-accent-hover: #9480ff;
    --color-accent-soft: rgba(123, 97, 255, 0.35);
    --color-accent-2: #00D4AA;         /* secondary: electric teal */
    --color-accent-2-hover: #2ae3bd;

    /* --- Color: surfaces --- */
    --color-surface: #0A0B1A;          /* near-black with blue tint */
    --color-surface-raised: #12132a;
    --color-card-bg: rgba(255, 255, 255, 0.05);
    --color-card-bg-strong: rgba(255, 255, 255, 0.08);
    --color-border: rgba(255, 255, 255, 0.18);
    --color-border-soft: rgba(255, 255, 255, 0.1);

    /* --- Color: text --- */
    --color-text: #F5F5FF;
    --color-text-secondary: #A0A0C0;
    --color-text-muted: #6f6f8a;

    /* --- Color: feedback --- */
    --color-danger: #ff5d7a;
    --color-success: #00D4AA;
    --color-warning: #ffb347;

    /* --- Spacing scale (4/8/12/16/24/32/48) --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* --- Radii --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* --- Typography --- */
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Space Grotesk", "Orbitron", "Playfair Display", serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* --- Effects --- */
    --blur-card: blur(12px);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 24px var(--color-accent-soft);
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;

    /* --- Layout --- */
    --z-nav: 1000;
    --z-overlay: 1100;
    --z-toast: 1200;
}

/* Utility: glassmorphism card */
.glass-card {
    background: var(--color-card-bg);
    backdrop-filter: var(--blur-card);
    -webkit-backdrop-filter: var(--blur-card);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
}