/* ==========================================================================
   Legends Bar and Grill: design tokens
   Smoke and Brass. Termina for structure, Newsreader for reading.
   ========================================================================== */

:root {
    /* --- Core palette ------------------------------------------------- */
    --smoke:        #12100E;  /* base, near black with a warm bias        */
    --smoke-deep:   #0A0908;  /* footer, overlays, the darkest ground     */
    --ash:          #211D19;  /* cards, raised surfaces                   */
    --ash-soft:     #2B2620;  /* hover on raised surfaces                 */
    --ash-line:     #332C25;  /* borders, dividers                        */
    --brass:        #C8912F;  /* hero accent                              */
    --brass-light:  #E0B15C;  /* hover, highlight                         */
    --brass-deep:   #8C6420;  /* pressed, shadow of brass                 */
    --bone:         #F2EDE4;  /* primary type on dark                     */
    --bone-dim:     #A79E92;  /* secondary type on dark                   */
    --bone-faint:   #6E675E;  /* tertiary, disabled                       */
    --ember:        #C0341F;  /* heat, spice, destructive                 */
    --ember-light:  #E4573F;
    --sage:         #7C8A6E;  /* vegetarian, vegan, success               */
    --sage-light:   #9AA98A;

    /* --- Light ground, used sparingly for contrast sections ----------- */
    --paper:        #F2EDE4;
    --paper-warm:   #E8E0D2;
    --ink:          #12100E;
    --ink-dim:      #574F45;

    /* --- Semantic ----------------------------------------------------- */
    --bg:            var(--smoke);
    --bg-raised:     var(--ash);
    --text:          var(--bone);
    --text-muted:    var(--bone-dim);
    --accent:        var(--brass);
    --border:        var(--ash-line);
    --success:       var(--sage);
    --danger:        var(--ember);

    /* --- Type families ------------------------------------------------ */
    --font-display: "termina", "Helvetica Neue", "Arial Black", system-ui, sans-serif;
    --font-body:    "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    /* --- Type scale, 1.25 ratio, fluid at the display end -------------- */
    --step--2: 0.75rem;
    --step--1: 0.82rem;
    --step-0:  1rem;
    --step-1:  1.15rem;
    --step-2:  clamp(1.32rem, 1.2rem + 0.5vw,  1.55rem);
    --step-3:  clamp(1.6rem,  1.4rem + 1vw,    2.1rem);
    /* Termina's capitals run about 0.93em wide, which is far wider than a
       typical sans. A ten character word therefore needs roughly 9.3em, so
       these floors are set from the longest words the site actually uses
       rather than from a comfortable looking number. */
    --step-4:  clamp(1.7rem,  1.35rem + 1.8vw, 3rem);
    --step-5:  clamp(1.85rem, 1.2rem + 3.3vw,  4.4rem);
    --step-6:  clamp(1.95rem, 0.9rem + 5.3vw,  6.5rem);
    --step-7:  clamp(2.4rem,  1rem + 7.4vw,    9rem);

    /* --- Tracking. Termina wants air when it is set large -------------- */
    --track-display:  -0.02em;
    --track-heading:   0.01em;
    --track-eyebrow:   0.28em;
    --track-label:     0.16em;

    /* --- Spacing, 4px base -------------------------------------------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --space-10: 8rem;
    --space-11: 12rem;

    /* Section rhythm scales down on small screens */
    --section-y: clamp(4rem, 2rem + 8vw, 9rem);

    /* --- Measure and layout ------------------------------------------- */
    --measure:      62ch;
    --shell:        1320px;
    --shell-narrow: 900px;
    --gutter:       clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

    /* --- Radii. Mostly square. Brass does not do bubbles -------------- */
    --radius-0: 0;
    --radius-1: 2px;
    --radius-2: 4px;
    --radius-pill: 999px;

    /* --- Elevation ----------------------------------------------------- */
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 8px 24px -8px rgb(0 0 0 / 0.65);
    --shadow-3: 0 24px 60px -20px rgb(0 0 0 / 0.8);
    --shadow-brass: 0 0 0 1px var(--brass-deep), 0 12px 40px -16px rgb(200 145 47 / 0.45);

    /* --- Motion -------------------------------------------------------- */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:  160ms;
    --dur-base:  280ms;
    --dur-slow:  620ms;
    --dur-reveal: 900ms;

    /* --- Layers -------------------------------------------------------- */
    --z-grain:    1;
    --z-raised:   10;
    --z-sticky:   100;
    --z-header:   200;
    --z-drawer:   300;
    --z-modal:    400;
    --z-toast:    500;
}

/* Respect a reduced motion preference everywhere, once. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 1ms;
        --dur-base: 1ms;
        --dur-slow: 1ms;
        --dur-reveal: 1ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}