/* ==========================================================================
   ZARF Design Tokens
   ========================================================================== */

:root {
    /* Colors */
    --color-bg:             #0A0A0A;
    --color-bg-secondary:   #141414;
    --color-surface:        #1A1A1A;
    --color-surface-hover:  #222222;
    --color-gold:           #C9A84C;
    --color-gold-hover:     #D4B85A;
    --color-gold-muted:     rgba(201, 168, 76, 0.15);
    --color-gold-border:    rgba(201, 168, 76, 0.3);
    --color-text:           #F5F0EB;
    --color-text-secondary: #A89F94;
    --color-text-muted:     #6B6259;
    --color-white:          #FFFFFF;
    --color-error:          #C0392B;
    --color-success:        #5A7247;

    /* Typography */
    --font-heading: 'Playfair Display', 'Georgia', serif;
    --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;

    --text-xs:   0.8125rem;   /* 13px */
    --text-sm:   0.875rem;    /* 14px */
    --text-base: 1rem;        /* 16px */
    --text-lg:   1.125rem;    /* 18px */
    --text-xl:   1.5rem;      /* 24px */
    --text-2xl:  1.75rem;     /* 28px */
    --text-3xl:  2.25rem;     /* 36px */
    --text-4xl:  3rem;        /* 48px */
    --text-5xl:  4rem;        /* 64px */
    --text-6xl:  5rem;        /* 80px */

    /* Spacing */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */

    /* Layout */
    --max-width:        1200px;
    --max-width-narrow: 720px;
    --header-height:    72px;

    /* Borders */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;

    /* Shadows */
    --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --ease-out:  cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration:  200ms;
    --duration-slow: 600ms;
}

/* Responsive overrides */
@media (max-width: 768px) {
    :root {
        --text-5xl: 2.5rem;
        --text-6xl: 3rem;
        --text-4xl: 2.25rem;
        --text-3xl: 1.75rem;
        --header-height: 60px;
    }
}