/* ============================================================
   01-tokens.css  (1 of 6)

   Design tokens and the base reset.

   Everything downstream reads the custom properties defined here, so this file
   loads first and nothing else declares a :root token.

   Part of an ordered set. The browser concatenates these in the order they
   are linked in fragments/head.html, and that order IS the cascade. Do not
   reorder the <link> tags, and do not move a rule between files without
   checking what it would then stop overriding.
   ============================================================ */

/* ============================================================
   BiteSite design system — warm, appetizing, not generic-AI-blue.
   Built as overrides on top of Bootstrap 5, so every existing
   .btn / .card / .badge / .form-control class keeps working.

   v2 — Mobile-first redesign inspired by modern food ordering apps.
   ============================================================ */

:root {
    /* ============================================================
       BiteSite — BIG BEEF / burger-landing neo-brutalist system.
       Ported from /Users/yash113gadia/burger-landing/css/style.css.

       Bone canvas, near-black 3px borders, hard offset shadows,
       red + yellow accents, Archivo Black uppercase type.
       ============================================================ */

    /* --- Surfaces. Warm bone canvas, bone cards. --- */
    --color-bg:            #f2ead9;  /* bone canvas */
    --color-surface:       #f2ead9;  /* bone cards */
    --color-field:         #fffdf6;  /* inputs — lighter bone */
    --color-field-border:  #14100d;  /* control edge — near-black */
    --color-field-rule:    #14100d;
    --color-surface-food:  #f2ead9;
    --color-surface-deep:  #e6dcc4;  /* pressed/active */

    --color-ink:       #14100d;  /* near-black */
    --color-ink-muted: #5c5247;  /* warm grey */
    --color-border:    #14100d;

    /* --- Terracotta red is the primary action colour. --- */
    --color-primary:      #e8281e;  /* red */
    --color-primary-dark: #b81f16;  /* red-dark */
    --color-primary-soft: #ff6a5e;
    --color-primary-tint: #ffd9d4;

    /* --- Yellow accents. --- */
    --color-accent:        #14100d;
    --color-accent-strong: #14100d;
    --color-accent-tint:   #ffc918;

    /* --- Status. --- */
    --color-success:      #14100d;
    --color-success-tint: #ffc918;
    --color-warning:      #14100d;
    --color-warning-tint: #ffc918;
    --color-info:         #14100d;
    --color-info-tint:    #ffc918;
    --color-danger:       #e8281e;
    --color-danger-tint:  #ffd9d4;

    --color-nav: #f2ead9;

    /* --- Shape. Brutalist: tight radii, hard edges. --- */
    --radius-sm:   0px;
    --radius-md:   2px;
    --radius-lg:   2px;
    --radius-pill: 2px;

    /* --- Depth. Hard offset shadows, no soft blur. --- */
    --shadow-sm: 3px 3px 0 #14100d;
    --shadow-md: 5px 5px 0 #14100d;
    --shadow-lg: 8px 8px 0 #14100d;
    --shadow-sticky: 0 -3px 0 #14100d;

    --color-coral:      #ffc918;
    --color-coral-deep: #ffb300;

    /* --- Focus ring: thick black outline. --- */
    --focus-ring: 0 0 0 3px #14100d;

    /* --- Type. Archivo for body, Archivo Black for display. --- */
    --font-display: 'Archivo Black', system-ui, sans-serif;
    --font-body:    'Archivo', system-ui, -apple-system, sans-serif;

    /* --- Type scale. --- */
    --text-display-lg:  40px;  --lh-display-lg:  40px;
    --text-headline-lg: 28px;  --lh-headline-lg: 32px;
    --text-headline-md: 22px;  --lh-headline-md: 28px;
    --text-body-lg:     16px;  --lh-body-lg:     24px;
    --text-body-md:     14px;  --lh-body-md:     20px;
    --text-label-lg:    14px;  --lh-label-lg:    20px;
    --text-label-sm:    12px;  --lh-label-sm:    16px;

    /* --- Spacing scale. --- */
    --stack-xs: 4px;
    --stack-sm: 12px;
    --stack-md: 24px;
    --stack-lg: 48px;
    --margin-mobile: 24px;
    --gutter-mobile: 20px;
    --hit-area: 48px;

    --bottom-nav-height: 64px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}


/* `text-wrap` is a shorthand for text-wrap-mode + text-wrap-style, so `text-wrap: pretty`
   also sets mode back to its initial `wrap` — on every element in the document. That
   silently defeats any `white-space: nowrap` that relies on inheritance: the parent
   computes nowrap, and this rule then applies `wrap` directly to each child, which beats
   an inherited value. It is why the marquee strip broke each "FRESH · FAST · FIERCE" onto
   three lines despite its track being explicitly nowrap.

   The longhand asks for the thing that was actually wanted — nicer line breaking — and
   leaves wrapping mode alone. */
* {
    text-wrap-style: pretty;
}