/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Colors */
    --color-primary:      #1a1a1a;
    --color-secondary:    #f5f5f5;
    --color-accent:       #da5a00;
    --color-accent-dark:  #b34a00;
    --color-white:        #ffffff;
    --color-off-white:    #faf9f7;
    --color-light:        #f5f3f0;
    --color-gray:         #767676;
    --color-gray-light:   #d0cdc9;
    --color-border:       #e5e2de;
    --color-danger:       #c0392b;
    --color-success:      #27ae60;

    /* Typography */
    --font-display: 'Montserrat', Arial, sans-serif;
    --font-body:    'Montserrat', Arial, sans-serif;
    --font-base:    'Montserrat', Arial, sans-serif;

    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   17px;
    --text-lg:   20px;
    --text-xl:   30px;
    --text-2xl:  34px;
    --text-3xl:  48px;
    --text-4xl:  64px;

    --weight-light:   300;
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold:600;
    --weight-bold:    700;

    --leading-tight:  1.2;
    --leading-snug:   1.4;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    --tracking-tight:  -0.02em;
    --tracking-normal:  0em;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.12em;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Layout */
    --container-max:     1200px;
    --container-padding: 35px;
    --header-height:     60px;

    /* Borders & Radii */
    --radius-sm:  2px;
    --radius-md:  4px;
    --radius-lg:  8px;
    --radius-xl:  16px;
    --radius-button: 5px;
    --radius-full:9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-base:   0.25s ease;
    --transition-slow:   0.4s ease;

    /* Z-index layers */
    --z-below:   -1;
    --z-base:     0;
    --z-above:   10;
    --z-header:  100;
    --z-modal:   200;
    --z-toast:   300;
}