/* Design Tokens for BeatStore */

:root {
    /* Colors */
    --bg: #0b0710;
    --bg-2: #15101c;
    --glass: rgba(21, 15, 28, 0.55);
    --glass-light: rgba(245, 241, 255, 0.08);

    --ink: #f5f1ff;
    --ink-dim: #b7aecf;
    --ink-darker: #756b8c;

    --grad-1: #ff2e88;
    --grad-2: #ff8a3d;
    --grad-border: rgba(255, 150, 120, 0.35);

    --border: rgba(245, 241, 255, 0.14);
    --border-dim: rgba(245, 241, 255, 0.09);

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 25px 60px -30px rgba(255, 90, 150, 0.35);

    /* Transitions */
    --transition: all 0.25s ease;
}

/* Light theme */
[data-theme="light"] {
    --bg: #f5f5f5;
    --bg-2: #efefef;
    --glass: rgba(255, 255, 255, 0.8);
    --glass-light: rgba(0, 0, 0, 0.05);

    --ink: #1a1a1a;
    --ink-dim: #666;
    --ink-darker: #999;

    --border: rgba(0, 0, 0, 0.1);
    --border-dim: rgba(0, 0, 0, 0.08);
}

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink);
}

/* Monospace for numbers */
.meta-row, .price, .beat-specs, .beat-metadata {
    font-family: 'Cascadia Mono', 'Monaco', 'SF Mono', 'Courier New', monospace;
}