/* ============================================================
   tokens.css — Banh Mi & Rolls Factory design tokens
   Source of truth: docs/DESIGN.md §1. Do not edit values here
   without updating DESIGN.md. All page CSS must use these vars.
   ============================================================ */

:root {
  color-scheme: light;
  /* primitives — palette pulled from the logo + the bread photos */
  --lacquer-900: #4A0E0B;  /* darkest logo maroon */
  --lacquer-700: #7A1512;  /* logo oval red */
  --brick-600:   #A82815;  /* bright logo ring red — primary action */
  --brick-500:   #C23A22;  /* hover/bright accent */
  --crust-500:   #D98E32;  /* baked crust gold */
  --crust-300:   #EDBD7A;  /* pale crust */
  --gold-400:    #E9B93C;  /* logo "&" gold — highlights, stars */
  --herb-600:    #33613C;  /* cilantro green — secondary */
  --kraft-200:   #F0E4CE;  /* kraft paper panel */
  --kraft-100:   #F8F1E3;  /* light kraft */
  --paper:       #FFFCF5;  /* warm paper white — page background */
  --ink-900:     #221208;  /* crust-brown near-black — text */
  --ink-600:     #5C4A3B;  /* muted text */
  --white:       #FFFFFF;

  /* semantic */
  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-panel: var(--kraft-100);
  --color-panel-strong: var(--kraft-200);
  --color-ink: var(--ink-900);
  --color-ink-muted: var(--ink-600);
  --color-primary: var(--brick-600);
  --color-primary-hover: var(--brick-500);
  --color-primary-deep: var(--lacquer-700);
  --color-on-primary: #FFF8ED;
  --color-accent: var(--crust-500);
  --color-secondary: var(--herb-600);
  --color-gold: var(--gold-400);
  --color-border: #E4D5BC;
  --color-border-strong: #9C8871;  /* form-control edges — 3.4:1 on white (WCAG 1.4.11) */
  --color-focus: var(--brick-600);

  /* dark band (footer, dark sections) */
  --color-band-bg: #1C0E07;
  --color-band-ink: #F4E9D8;
  --color-band-muted: #C9B49B;

  /* type */
  --font-display: "Anton", "Arial Narrow", sans-serif;          /* has Vietnamese subset */
  --font-body: "Be Vietnam Pro", "Helvetica Neue", sans-serif;  /* designed for Vietnamese */
  --font-ticket: "IBM Plex Mono", ui-monospace, monospace;      /* prices, labels, tickets */

  /* scale (rem): 12 14 16 18 21 26 34 44 60 84 */
  --text-xs: .75rem;  --text-sm: .875rem; --text-base: 1rem;  --text-md: 1.125rem;
  --text-lg: 1.3125rem; --text-xl: 1.625rem; --text-2xl: 2.125rem; --text-3xl: 2.75rem;
  --text-4xl: clamp(2.75rem, 6vw, 3.75rem); --text-hero: clamp(3.25rem, 9vw, 5.25rem);

  /* spacing 4px scale */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;

  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(34,18,8,.10);
  --shadow-md: 0 6px 20px -6px rgba(34,18,8,.18);
  --shadow-lg: 0 18px 44px -12px rgba(34,18,8,.26);
  --container: 1160px;
  --ease-out: cubic-bezier(.22,.9,.35,1);
  --dur-fast: 180ms; --dur-med: 280ms;
}