/**
 * MusicStore Design System — Design Tokens (Light-Modern Standard)
 * Clean CSS Custom Properties without !important
 */

:root {
    /* 1. Core Brand & Surface Palette */
    --ms-primary: #f4f7f6;
    --ms-bg: #f4f7f6;
    --ms-bg-bar: #ffffff;
    --ms-surface: #ffffff;
    --ms-surface-2: #f0f3f5;
    --ms-surface-3: #e4e9ec;
    --ms-border: #e2e7ea;
    --ms-border-strong: #cbd2d6;

    /* 2. Text & Typography (Graphite & Slate, WCAG AA Compliant) */
    --ms-text: #2d3436;
    --ms-text-secondary: #505b63;
    --ms-text-muted: #74808a;

    /* 3. Musical Accent (Refined Terracotta / Deep Orange) */
    --ms-accent: #c8500f;
    --ms-accent-hover: #b34409;
    --ms-accent-dark: #8c3204;
    --ms-accent-alpha: rgba(200, 80, 15, 0.12);
    --ms-accent-subtle: rgba(200, 80, 15, 0.06);

    /* 4. Feedback & Status */
    --ms-success: #00b894;
    --ms-warning: #e17055;
    --ms-danger: #d63031;
    --ms-info: #0984e3;

    /* 5. Component Geometry & Border Radius */
    --ms-radius-xs: 4px;
    --ms-radius-sm: 8px;
    --ms-radius-md: 12px;
    --ms-radius-lg: 18px;
    --ms-radius-full: 9999px;
    --ms-radius-btn: 12px;
    --ms-radius-input: 8px;

    /* 6. Unified Component Dimensions */
    --ms-input-height: 44px;
    --ms-btn-height: 48px;
    --ms-header-height: 80px;

    /* 7. Soft Elevation & Shadows */
    --ms-shadow-xs: 0 1px 3px rgba(45, 52, 54, 0.04);
    --ms-shadow-sm: 0 2px 8px rgba(45, 52, 54, 0.05);
    --ms-shadow-md: 0 4px 20px rgba(45, 52, 54, 0.06);
    --ms-shadow-lg: 0 12px 36px rgba(45, 52, 54, 0.08);

    /* 8. Spacing & Rhythm (8pt scale) */
    --ms-space-1: 4px;
    --ms-space-2: 8px;
    --ms-space-3: 12px;
    --ms-space-4: 16px;
    --ms-space-5: 20px;
    --ms-space-6: 24px;
    --ms-space-8: 32px;
    --ms-space-10: 40px;
    --ms-space-12: 48px;

    --ms-gap: 24px;
    --ms-gap-sm: 12px;
    --ms-gap-lg: 32px;
    --ms-gap-v: 8px;
    --ms-gap-h: 12px;

    /* 9. Layout & Breakpoints */
    --ms-container: 1400px;
    --ms-side-padding: 24px;

    /* 10. Motion & Animation */
    --ms-transition-fast: 0.15s ease;
    --ms-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ms-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}