/* ============================================
   CSS Variables / Design Tokens
   ============================================ */

:root {
    /* Colors - Background */
    --bg-primary: #0a0f1a;
    --bg-secondary: #0f1522;
    --bg-card: #151b2b;
    --bg-elevated: #1e2638;

    /* Colors - Borders */
    --border: #252e42;
    --border-hover: #354157;

    /* Colors - Text */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Colors - Accent */
    --accent: #c9a962;
    --accent-hover: #d4b872;
    --accent-glow: rgba(201, 169, 98, 0.15);

    /* Colors - Semantic */
    --success: #34c759;
    --danger: #ff453a;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-md: 0 12px 32px rgba(0,0,0,0.4);
    --shadow-lg: 0 24px 64px rgba(0,0,0,0.6);

    /* Transitions */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}