/*
 * Design Tokens
 * Single source of truth for colors, spacing, typography, shadows, radii.
 */

:root {
    /* ── Colors — Official Marketer Blvd brand palette ── */
    --color-primary:        #006E3B;
    --color-primary-dark:   #004D29;
    --color-primary-light:  #E8F5EE;
    --color-accent:         #D4A843;
    --color-accent-dark:    #B8902F;

    --color-text:           #2D2D2D;
    --color-text-light:     #555555;
    --color-text-muted:     #888888;
    --color-text-inverse:   #FFFFFF;

    --color-bg:             #FFFFFF;
    --color-bg-alt:         #F2F0EB;
    --color-bg-dark:        #1A1A1A;
    --color-bg-muted:       #F9F7F3;

    --color-border:         #E0DDD6;
    --color-border-dark:    #C8C4BC;

    --color-success:        #006E3B;
    --color-error:          #CC4444;

    /* ── Typography ── */
    --font-sans:            'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading:         'Poppins', 'Source Sans 3', sans-serif;
    --font-mono:            'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:              0.75rem;    /* 12px */
    --text-sm:              0.875rem;   /* 14px */
    --text-base:            1rem;       /* 16px */
    --text-lg:              1.125rem;   /* 18px */
    --text-xl:              1.25rem;    /* 20px */
    --text-2xl:             1.5rem;     /* 24px */
    --text-3xl:             1.875rem;   /* 30px */
    --text-4xl:             2.25rem;    /* 36px */
    --text-5xl:             3rem;       /* 48px */

    --leading-tight:        1.25;
    --leading-normal:       1.6;
    --leading-relaxed:      1.75;

    --tracking-tight:       -0.01em;
    --tracking-normal:      0;
    --tracking-wide:        0.025em;

    --weight-normal:        400;
    --weight-medium:        500;
    --weight-semibold:      600;
    --weight-bold:          700;

    /* ── Spacing ── */
    --space-1:              0.25rem;
    --space-2:              0.5rem;
    --space-3:              0.75rem;
    --space-4:              1rem;
    --space-5:              1.25rem;
    --space-6:              1.5rem;
    --space-8:              2rem;
    --space-10:             2.5rem;
    --space-12:             3rem;
    --space-16:             4rem;
    --space-20:             5rem;
    --space-24:             6rem;
    --space-32:             8rem;

    /* ── Widths ── */
    --width-narrow:         640px;
    --width-content:        800px;
    --width-wide:           1080px;
    --width-max:            1200px;
    --width-full:           1400px;

    /* ── Radius ── */
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-xl:            16px;
    --radius-full:          9999px;

    /* ── Shadows ── */
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg:            0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl:            0 16px 48px rgba(0, 0, 0, 0.12);

    /* ── Transitions ── */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
    --transition-slow:      400ms ease;

    /* ── Z-index ── */
    --z-dropdown:           10;
    --z-sticky:             20;
    --z-overlay:            30;
    --z-modal:              40;
}