/* tokens.css — Design tokens: colors, fonts, spacing, type scale */
:root {
    /* Colors (base — palette-retro-warm.css overrides these) */
    --persimmon: #CF4520;
    --bone: #F5F5F0;
    --stone: #E8E8E5;
    --charcoal: #2F353B;

    /* Section spacing */
    --section-gap-lg: var(--space-6);
    --section-gap-sm: var(--space-3);
    --section-scroll-offset: 236px;

    /* Copy width — optimal line length for readability (45-75ch ideal) */
    --design-pass-copy-max: 60ch;  /* Ideal readability: 45-75 chars/line */

    /* Media (images) */
    --media-fit: cover;
    --media-position: center center;
    --media-filter: contrast(1.03) saturate(1.02);

    /* Hero texture */
    --editorial-hero-texture-image: var(--retro-warm-bg-texture);
    --editorial-hero-texture-size: var(--retro-warm-bg-size);
    --editorial-hero-texture-repeat: var(--retro-warm-bg-repeat);
    --editorial-hero-texture-opacity: 0.16;

    /* Fonts */
    --font-mono: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-title: 'Excon', sans-serif;

    /* Typography scale */
    --text-2xs:  0.5625rem;   /* 9px  */
    --text-xs:   0.6875rem;   /* 11px */
    --text-sm:   0.75rem;     /* 12px */
    --text-base: 0.9375rem;   /* 15px */
    --text-md:   1rem;        /* 16px */
    --text-lg:   1.125rem;    /* 18px */
    --text-xl:   1.25rem;     /* 20px */
    --text-2xl:  1.375rem;    /* 22px */
    --text-3xl:  1.5rem;      /* 24px */
    --text-4xl:  1.625rem;    /* 26px */

    /* Semantic type tokens */
    --font-size-mono:       var(--text-xs);
    --font-size-body:       var(--text-base);
    --font-size-body-lg:    var(--text-md);
    --font-size-card-title: var(--text-2xl);
    --font-size-nav:        0.875rem;
    --font-size-brand:      var(--text-lg);

    /* Spacing scale (4px base) */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-7:  1.75rem;   /* 28px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-14: 3.5rem;    /* 56px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */

    /* Semantic spacing */
    --section-pad-x:  var(--space-14);
    --section-pad-y:  var(--space-20);
    --card-pad:       var(--space-6);
    --component-gap:  var(--space-3);
    --element-gap:    var(--space-2);
    --header-pad-y:   var(--space-5);
    --header-height:  108px;
}

@media (max-width: 768px) {
    :root {
        --header-height: 66px;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--bone);
    color: var(--charcoal);
    overflow-x: hidden;
}