﻿/* =========================================================
   tokens.css — Option A · Marcellus Stack
   Single source of truth for all design values.
   Every color, font family, font size, spacing unit, and
   border radius is declared here as a CSS custom property.
   No other stylesheet ever hardcodes a value — it references
   a token. This rule has no exceptions.
   ========================================================= */

/* ----- @font-face ---------------------------------------- */

@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/marcellus-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/marcellus-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/pacifico-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/pacifico-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----- Custom properties ---------------------------------- */

:root {
  /* Typography */
  --f-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --f-body:    Georgia, 'Times New Roman', serif;
  --f-script:  'Pacifico', cursive;
  --f-ui:      system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-2xs:  0.6875rem; /* 11px — compact UI labels */
  --text-3xs:  0.625rem;  /* 10px — badge / tag labels */
  --text-4xs:  0.5625rem; /* 9px  — bottom-nav item at ≤360px */
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* Line heights */
  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.05em;
  --ls-wider:  0.1em;

  /* Colors — brand palette */
  --c-red:         #8A2418;
  --c-ink:         #1F1814;
  --c-cream:       #E3DFCE;
  --c-olive:       #5C5A2E;
  --c-slate:       #3F5D68;
  --c-clay:        #77240E;

  /* Colors — functional */
  --c-white:       #FFFFFF;
  --c-cream-light: #F5F2E8;
  --c-cream-dark:  #D4CEB5;
  --c-ink-soft:    #3D3028;
  --c-olive-light: #B5B36E;  /* lightened olive — eyebrow/label text on dark backgrounds; 8.0:1 on ink */
  --c-status-open: #1B8244;  /* green dot — market open indicator; ≥3:1 on cream and ink (WCAG 1.4.11) */
  --c-status-open-dark: #4ade80;  /* open-status dot/pulse on dark vendor status bars */

  /* Colors — third-party brands (fixed by their owners; not brand-adjustable) */
  --c-doordash: #FF3008;
  --c-ubereats: #06C167;
  --c-grubhub:  #F63440;

  /* Colors — page-theme accents & image-placeholder art direction
     (deep gradient stops and placeholder tints used by page style blocks;
     temporary until real photography replaces placeholders, D-WEB-020) */
  --c-brown-deep:      #2d1208;
  --c-tan:             #c4a882;
  --c-espresso:        #1f1408;
  --c-umber-deep:      #2a1a0a;
  --c-bronze-deep:     #2e2008;
  --c-rust-deep:       #3d1208;
  --c-maroon-deep:     #3d0a00;
  --c-saddle:          #8b4513;
  --c-teal-black:      #0a1a1f;
  --c-navy-deep:       #1a1a2d;
  --c-indigo-deep:     #121232;
  --c-olive-black:     #1a1a0a;
  --c-pine-deep:       #0b2215;
  --c-forest-deep:     #142508;
  --c-green-black:     #0d2e00;
  --c-green-loden:     #2d3d22;
  --c-moss:            #2a3d10;
  --c-moss-deep:       #1a2e0a;
  --c-leaf:            #3d6b35;
  --c-green-bright:    #22a053;
  --c-mint:            #86efac;
  --c-parchment:       #e8e4d6;
  --c-parchment-dark:  #d8d4c4;

  /* Spacing */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-7:   1.75rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-14:  3.5rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* Border radius */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* Layout */
  --nav-w:        220px;
  --content-max:  1100px;
  --bottom-nav-h: 64px;
  --mobile-bar-h: 56px;

  /* Transitions */
  --t-fast:   150ms ease;
  --t-normal: 250ms ease;
  --t-base:   250ms ease;  /* alias of --t-normal — in use across blog pages */
}
