/* =================================================================
   DESIGN TOKENS (tokens.css)
   -----------------------------------------------------------------
   Single source of truth for the visual language.
   ================================================================= */

:root {
    /* --- Color Palette --- */
    --color-bg:            #0f0a1e; /* Deep Midnight Purple */
    --color-bg-alt:        #1a1435;
    --color-bg-card:       rgba(255, 255, 255, 0.05);
    
    --color-text:          #ffffff;
    --color-text-muted:    #a099c5;
    
    --color-primary:       #ff2d75; /* Neon Pink */
    --color-primary-hover: #ff5c96;
    
    --color-secondary:     #00f2ff; /* Cyan */
    --color-secondary-hover:#5df7ff;
    
    --color-accent:        #7000ff; /* Electric Purple */
    --color-border:        rgba(255, 255, 255, 0.1);
    --color-white:         #ffffff;

    /* --- Typography --- */
    --font-heading:        'Luckiest Guy', system-ui, sans-serif;
    --font-body:           'Inter', system-ui, -apple-system, sans-serif;

    /* --- Border Radius --- */
    --radius-sm:           12px;
    --radius-md:           20px;
    --radius-lg:           32px;
    --radius-xl:           40px;
    --radius-full:         9999px;

    /* --- Shadows --- */
    --shadow-sm:           0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md:           0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg:           0 16px 48px rgba(0, 0, 0, 0.4);
    --shadow-primary:      0 0 20px rgba(255, 45, 117, 0.4);
    --shadow-secondary:    0 0 20px rgba(0, 242, 255, 0.4);

    /* --- Motion --- */
    --transition-fast:     0.2s ease;
    --transition-base:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:     0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Layout --- */
    --container-max:       1140px;
    --container-px:        clamp(1.5rem, 6vw, 5rem);
    --section-spacing:     clamp(4rem, 10vw, 8rem);
}