/* ================================================
   CSS VARIABLES (Design Tokens)
   ================================================ */
:root {
    /* Colors */
    --color-primary: #000000;
    --color-secondary: #333333;
    --color-accent-yellow: #f4c400;
    --color-accent-yellow-alt: #EAD430;
    --color-accent-red: #ff1010;
    --color-accent-red-dark: #e10600;
    --color-background-light: #f2f2f2;
    --color-background-white: #ffffff;
    --color-text-dark: #141414;
    --color-text-light: #222222;
    --color-overlay-dark: rgba(0, 0, 0, 0.38);
    --color-overlay-gradient-start: rgba(0, 0, 0, 0.6);
    --color-overlay-gradient-end: rgba(0, 0, 0, 0.4);
    
    /* Typography */
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --font-decorative: 'Alex Brush', cursive;
    --font-display: 'Alfa Slab One', cursive;
    
    /* Font Sizes */
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-base: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 36px;
    --font-size-3xl: 48px;
    --font-size-4xl: 56px;
    --font-size-5xl: 64px;
    --font-size-display: 180px;
    --font-size-overlay: 210px;
    
    /* Spacing */
    --spacing-xs: 10px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-2xl: 50px;
    --spacing-3xl: 60px;
    --spacing-4xl: 80px;
    --spacing-5xl: 100px;
    
    /* Transitions */
    --transition-fast: 0.2s;
    --transition-base: 220ms ease;
    --transition-slow: 260ms ease;
    --transition-slower: 320ms ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.22);
    --shadow-xl: 0 14px 28px rgba(0, 0, 0, 0.18);
    --shadow-text: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* ================================================
   GLOBAL RESET & BASE STYLES
   ================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-background-light);
    color: var(--color-primary);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}