/* ==========================================================================
   Sully's — Design Tokens
   Single source of truth for colours, typography, spacing, motion.
   Every component pulls from these. Theme-specific colours live in themes.css.
   ========================================================================== */

:root {
    /* ---- Brand palette (from Style Sheet PDF) ---- */
    --sullys-cream:       #FFFCE9;  /* warm off-white — default body bg */
    --sullys-orange:      #EB573A;  /* burnt orange */
    --sullys-peach:       #F8A06A;  /* soft peach */
    --sullys-maroon:      #5E140F;  /* deep burgundy — red theme bg */
    --sullys-blue:        #374A77;  /* mid blue */
    --sullys-navy:        #14233D;  /* deep navy — blue theme bg */
    --sullys-yellow:      #FFF2AF;  /* buttery yellow — hover + active nav */
    --sullys-sky:         #C6E3F8;  /* soft sky blue — primary text on navy */

    /* ---- Typography ---- */
    --font-primary:   'Manna',      Georgia, serif;          /* display (large) */
    --font-secondary: 'Birdie',     Georgia, serif;          /* display (alt) */
    --font-body:      'Apercu Mono', ui-monospace, Menlo, Consolas, monospace;

    /* Type scale (clamped for fluid responsive) */
    --type-display-xl:   clamp(4rem, 12vw, 12rem);       /* SULLYS hero */
    --type-display-lg:   clamp(3rem, 7vw, 6.5rem);       /* Section headings */
    --type-display-md:   clamp(2rem, 4vw, 3.5rem);       /* Sub-headings */
    --type-body-lg:      clamp(1rem, 1.1vw, 1.25rem);
    --type-body:         clamp(0.875rem, 1vw, 1rem);
    --type-body-sm:      clamp(0.75rem, 0.9vw, 0.875rem);
    --type-label:        clamp(0.625rem, 0.8vw, 0.75rem);

    /* Line heights */
    --lh-tight:   1.05;
    --lh-heading: 1.15;
    --lh-body:    1.5;
    --lh-loose:   1.75;

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.08em;
    --tracking-wider:  0.12em;

    /* ---- Spacing scale (8pt-ish) ---- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  16px;
    --space-4:  24px;
    --space-5:  32px;
    --space-6:  48px;
    --space-7:  64px;
    --space-8:  96px;
    --space-9:  128px;
    --space-10: 192px;

    /* ---- Layout ---- */
    --container-max:  1920px;
    --container-pad:  clamp(1.5rem, 4vw, 4rem);
    --section-pad-y:  clamp(4rem, 10vw, 10rem);

    /* ---- Motion ---- */
    --ease-out-expo:   cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-cubic:  cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:        0.25s;
    --dur-med:         0.45s;
    --dur-slow:        0.85s;
    --dur-reveal:      1.2s;

    /* ---- Z-index scale ---- */
    --z-base:        1;
    --z-sticky:      10;
    --z-header:      100;
    --z-menu:        200;
    --z-cursor:      9999;
    --z-modal:       1000;
}