:root {
  /* Brand primaries — from Grillicious brand palette */
  --color-yellow: #FFCC33;      /* primary brand yellow — bg fields, logo fill */
  --color-yellow-dark: #E6B41F; /* pressed/hover state of yellow surfaces */
  --color-ink: #1A1A1A;         /* near-black — text, outlines, dark surfaces */
  --color-cream: #F5F5DC;       /* warm off-white — light surfaces, type specimen bg */
  --color-orange: #F05110;      /* accent — combo pricing, CTAs, "NEW"/sale emphasis */
  --color-orange-dark: #C63E0B; /* hover/press for orange elements */

  /* Neutrals derived from ink, for text hierarchy on cream/white */
  --color-ink-90: oklch(from var(--color-ink) l c h / 0.9);
  --color-ink-70: oklch(from var(--color-ink) l c h / 0.7);
  --color-ink-45: oklch(from var(--color-ink) l c h / 0.45);
  --color-ink-15: oklch(from var(--color-ink) l c h / 0.15);
  --color-ink-08: oklch(from var(--color-ink) l c h / 0.08);

  --color-white: #FFFFFF;

  /* Semantic aliases */
  --surface-page: var(--color-cream);
  --surface-brand: var(--color-yellow);
  --surface-dark: var(--color-ink);
  --surface-card: var(--color-white);
  --surface-card-on-dark: #2A2A2A;

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-70);
  --text-muted: var(--color-ink-45);
  --text-on-dark: var(--color-cream);
  --text-on-brand: var(--color-ink);

  --border-hairline: var(--color-ink-15);
  --border-strong: var(--color-ink);

  --accent-primary: var(--color-orange);
  --accent-primary-hover: var(--color-orange-dark);
  --accent-brand: var(--color-yellow);
  --accent-brand-hover: var(--color-yellow-dark);

  /* Status dot — veg marker seen on menu (green circle) */
  --status-veg: #2E7D46;

  --focus-ring: var(--color-orange);
}