/* ============================================================
   Amigos Street Tacos - site design tokens + base components
   ------------------------------------------------------------
   Source of truth: the in-store TV boards (tv/tv-menu.css, menu-1 +
   menu-2). Every value here is lifted from the boards, not invented.
   The living reference is /styleguide/ - read it before changing any
   UI on amigosstreettacos.com, and build from these classes/tokens
   instead of adding new ones. Extend only when the boards genuinely
   have no equivalent (and then add the new piece to /styleguide/ too).

   Pages load fonts themselves (one <link>, same as /menu + menu-2):
   https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap
   Bebas Neue is self-hosted below (/fonts).
   ============================================================ */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bebas-neue-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: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bebas-neue-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;
}

/* ------------------------------------------------------------
   1. BRAND TOKENS (fixed - never change per theme)
   Straight from tv-menu.css :root. --a-* names are theme-proof: use
   them when something must look like the board no matter the theme
   (hero banners, promo panels). The un-prefixed --ink/--paper/--gold
   set further down is the themed web surface (/menu's system).
   ------------------------------------------------------------ */
:root {
  --a-ink:        #000000;   /* board background */
  --a-paper:      #f2f2f3;   /* board text */
  --a-paper-dim:  rgba(242, 242, 243, 0.60);
  --a-paper-faint:rgba(242, 242, 243, 0.20);
  --a-letterbox:  #1c1c1e;   /* off-board band, dark UI chrome */

  --a-coral:      #ef5b45;   /* category accent: Tacos, Specials */
  --a-mango:      #f79445;   /* category accent: Burritos, Dessert; eyebrow */
  --a-gold:       #f2c744;   /* price, star, badge fill, CTA */
  --a-lime:       #b4d45e;   /* category accent: Quesadillas, Sides */
  --a-turquoise:  #5cb85c;   /* category accent: Bowls, Drinks; status dot */
  --a-hotpink:    #f0705a;
  --a-red:        #ff2829;   /* urgency: deal badge, NEW, Call Orders chip */

  --a-cream:      #fefbf5;   /* white panel (Sofia header, promo panel) */
  --a-dark-text:  #1a1204;   /* text on gold / on white panels */
  --a-burnt:      #c45c12;   /* sub-line on a white promo panel */
  --a-brown:      #3d342c;   /* story text on a white promo panel */

  --a-card-bg:     rgba(247, 239, 226, 0.045);
  --a-card-bg-2:   rgba(247, 239, 226, 0.08);
  --a-card-border: rgba(247, 239, 226, 0.12);

  --a-brand-gradient: linear-gradient(100deg, #f2c744 0%, #f79445 45%, #ef5b45 100%);
  --a-ribbon-bg:      linear-gradient(95deg, rgba(239,91,69,0.22), rgba(242,199,68,0.16));
  --a-ribbon-border:  rgba(242, 199, 68, 0.45);

  --font-display: 'Outfit', sans-serif;      /* headings, prices, nav */
  --font-body:    'Inter', sans-serif;       /* everything else */
  --font-promo:   'Bebas Neue', sans-serif;  /* promo headlines + big CTAs only */

  --a-radius:     16px;   /* cards, tiles, promo panel */
  --a-radius-sm:  6px;    /* item rows */
  --a-pill:       999px;  /* buttons, tags */
}

/* ------------------------------------------------------------
   2. WEB THEMES - same tokens /menu uses (data-theme on <html>,
   localStorage key amigos-menu-theme). Light is default.
   ------------------------------------------------------------ */
:root {
  color-scheme: light dark;
  --ink: #eee7d8;
  --paper: #1c1c1e;
  --paper-dim: rgba(28, 28, 30, 0.68);
  --paper-faint: rgba(28, 28, 30, 0.28);
  --card-bg: rgba(28, 28, 30, 0.045);
  --card-border: rgba(28, 28, 30, 0.18);
  --gold: #b3821f;
  --surface: rgba(28, 28, 30, 0.06);
  --border: rgba(28, 28, 30, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ink: #352222;
    --paper: #fff3e6;
    --paper-dim: rgba(255, 243, 230, 0.62);
    --paper-faint: rgba(255, 243, 230, 0.22);
    --card-bg: rgba(255, 148, 69, 0.06);
    --card-border: rgba(255, 148, 69, 0.2);
    --gold: #ff8a3d;
    --surface: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.10);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #352222;
  --paper: #fff3e6;
  --paper-dim: rgba(255, 243, 230, 0.62);
  --paper-faint: rgba(255, 243, 230, 0.22);
  --card-bg: rgba(255, 148, 69, 0.06);
  --card-border: rgba(255, 148, 69, 0.2);
  --gold: #ff8a3d;
  --surface: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.10);
}
/* Logo swap: black mark on light, white mark on dark (same as /menu header). */
.nav-logo .lg-w { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .nav-logo .lg-b { display: none; }
  :root:not([data-theme]) .nav-logo .lg-w { display: block; }
}
:root[data-theme="dark"] .nav-logo .lg-b { display: none; }
:root[data-theme="dark"] .nav-logo .lg-w { display: block; }

/* ------------------------------------------------------------
   3. BOARD SURFACE - the TV board background, for the web.
   Black, soft radial lift top/bottom, vignette, film grain overlay.
   Inside it the themed tokens are re-pointed at the board palette so
   ordinary components (buttons, cards, text) just work on it.
   ------------------------------------------------------------ */
.a-board {
  position: relative;
  isolation: isolate;
  color: var(--a-paper);
  background:
    radial-gradient(170% 140% at 50% -25%, rgba(255,255,255,0.07) 0%, transparent 72%),
    radial-gradient(190% 150% at 50% 125%, rgba(255,255,255,0.04) 0%, transparent 72%),
    radial-gradient(210% 170% at 50% 50%, transparent 38%, rgba(0,0,0,0.60) 100%),
    var(--a-ink);
  --ink: var(--a-ink);
  --paper: var(--a-paper);
  --paper-dim: var(--a-paper-dim);
  --paper-faint: var(--a-paper-faint);
  --card-bg: var(--a-card-bg);
  --card-border: var(--a-card-border);
  --gold: var(--a-gold);
  --surface: var(--a-card-bg);
  --border: var(--a-card-border);
}
.a-board::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.55'/%3E%3C/svg%3E"),
    repeating-linear-gradient(48deg, rgba(255,255,255,0.016) 0 2px, transparent 2px 7px);
  background-size: 300px 300px, 520px 520px, auto;
}
.a-board > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   4. TYPE STYLES (board sizes converted vw -> rem at a 1920 board)
   ------------------------------------------------------------ */
/* Eyebrow - .brand-text .eyebrow: Inter 700, wide tracking, mango. */
.a-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--a-mango);
}
/* Brand title - .brand-text h1: Outfit 800 with the gold->coral gradient. */
.a-brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  background: var(--a-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Promo headline - .menu-col-img-headline: Bebas Neue, tight leading. */
.a-display {
  font-family: var(--font-promo);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
/* Section / card heading - .card-head h3: Outfit 700, 0.11em tracking. */
.a-h {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--paper);
}
/* Promo sub-line - .menu-col-img-sub: Inter 700, gold (burnt on white). */
.a-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-gold);
}
/* Promo story - .menu-col-img-story: Inter 300, all caps, airy. */
.a-story {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.82rem;
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Small tag - .board-title .tag: Inter 600 uppercase, dim. */
.a-tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
/* Caption - .subdivider-caption / .item-desc: small, faint. */
.a-caption {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--paper-faint);
}
/* Price - .item-price: Outfit 700, tabular, gold. */
.a-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--a-gold);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   5. COMPONENTS
   ------------------------------------------------------------ */
/* Gold pill CTA - site nav "Order Online" / hero button. */
.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: var(--a-pill);
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--a-dark-text);
  text-decoration: none;
  font-family: var(--font-promo);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
.a-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Outline pill - "View Locations", nav links. Outfit 700 uppercase. */
.a-btn--ghost {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 18px;
}
.a-btn--ghost:hover { border-color: var(--gold); filter: none; transform: none; }

/* Red chip - .orders-head-label / .deal-badge / .new-badge: urgency only. */
.a-chip {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--a-red);
  border-radius: 0.2em;
  padding: 0.32em 0.6em;
  box-shadow: 0 0.05em 0.15em rgba(0,0,0,0.18);
}
/* Pill variant - .deal-badge / .ribbon .badge (fully round ends). */
.a-chip--pill { border-radius: var(--a-pill); padding: 0.4em 0.9em; }

/* Gold price circle - .menu-col-img-price (menu-1 / original menu-2 banner). */
.a-price-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--a-gold);
  color: var(--a-dark-text);
  box-shadow: 0 6px 18px rgba(0,0,0,0.48), inset 0 0 0 2px rgba(255,255,255,0.42);
  flex-shrink: 0;
  text-shadow: none;
}
.a-price-badge .amt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.a-price-badge .note {
  margin-top: 3px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.56rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Black bracket price frame - .board-2 .menu-col-img-price (on a white panel). */
.a-price-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  color: var(--a-dark-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.03em;
  background:
    linear-gradient(#111, #111) left top / 100% 5px no-repeat,
    linear-gradient(#111, #111) left top / 5px 100% no-repeat,
    linear-gradient(#111, #111) left bottom / 68% 5px no-repeat,
    linear-gradient(#111, #111) right top / 5px 68% no-repeat;
}

/* Card / tile - site category tiles + loc teaser (translucent, 16px). */
.a-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--a-radius);
}

/* Boxed section label - .subdivider-box (THREE TACO DEALS etc). */
.a-subdivider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1em;
  border: 1px solid var(--card-border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--paper);
  text-align: center;
}
.a-subdivider small {
  margin-top: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
}

/* Item row - .item + .item-leader + .item-price (dotted leader). */
.a-item {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.24em 0.4em;
  margin: 0 -0.4em;
  border-radius: var(--a-radius-sm);
}
.a-item .name {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.a-item.is-top .name { color: var(--paper); font-weight: 700; }
.a-item .leader {
  flex: 1;
  min-width: 0.6em;
  border-bottom: 2px dotted var(--paper-faint);
  transform: translateY(-0.06em);
}
.a-item .crown { width: 1.2em; height: 1.12em; color: var(--a-gold); flex-shrink: 0; align-self: center; }

/* Ribbon - .ribbon: coral->gold wash strip with a red badge + message. */
.a-ribbon {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: 18px;
  background: var(--a-ribbon-bg);
  border: 1px solid var(--a-ribbon-border);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--paper);
}
.a-ribbon b { color: var(--a-gold); }

/* Status dot - footer .foot-item .dot (turquoise = live/open). */
.a-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--a-turquoise);
  vertical-align: middle;
}

/* White promo panel - .board-2 .menu-col-imgonly: caption on white, photo
   below with its top edge faded so the plate never meets the white on a
   hard line. Theme-proof (always white). */
.a-promo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--a-radius);
  background: #fff;
  color: var(--a-dark-text);
}
.a-promo .a-promo-cap {
  padding: 26px 26px 20px;
  text-align: center;
}
.a-promo .a-display { color: var(--a-dark-text); }
.a-promo .a-sub { color: var(--a-burnt); }
.a-promo .a-story { color: var(--a-brown); max-width: 26em; margin: 0.5em auto 0; white-space: pre-line; }
.a-promo .a-price-frame { margin-top: 14px; }
.a-promo .a-promo-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
}

/* ------------------------------------------------------------
   6. MOTION - the boards only pulse/flash; everything respects
   reduced motion.
   ------------------------------------------------------------ */
@keyframes a-deal-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
.a-pulse { animation: a-deal-pulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .a-pulse { animation: none; }
  .a-btn { transition: none; }
}