/* Colors sampled directly from the Pizza Xpress menu poster and logo artwork. */
:root {
  /* Brand core */
  --orange-500: #f29200; /* primary brand orange — menu side panel, CTAs */
  --orange-600: #d97f00; /* hover / pressed */
  --orange-400: #ffa726;
  --orange-100: #ffe6c2;
  --orange-050: #fff6ea;

  --yellow-500: #f9c307; /* section headings on black */
  --yellow-600: #e0ad00;
  --yellow-100: #fdeeb8;

  --red-600: #b9042f; /* the logo "X" crimson */
  --red-500: #d61232;
  --red-100: #fbd9e0;
  --flame-500: #fa5a0c; /* "Xpress" orange-red, gradient partner to red-600 */

  --cream-100: #fdefd6; /* logo lettering fill, warm paper */
  --cream-200: #f6e2bf;

  /* Neutrals — warm-tinted, built off the poster's near-black */
  --ink-900: #090909; /* poster background */
  --ink-800: #141311;
  --ink-700: #1e1c1a;
  --ink-600: #2b2825;
  --ink-500: #3a3633;
  --ink-400: #6e6862;
  --ink-300: #a8a29c;
  --ink-200: #d6d0c8;
  --ink-100: #ece7df;
  --ink-050: #f7f4ee;
  --white: #ffffff;

  /* Semantic status */
  --success-500: #3e9c3a; /* the basil / lettuce green in the food photography */
  --success-100: #e2f2df;
  --warning-500: #f9c307;
  --warning-100: #fdeeb8;
  --danger-500: #c21e2c;
  --danger-100: #fbdcdd;

  /* ---- Semantic aliases: use these in components ---- */
  --brand: var(--orange-500);
  --brand-hover: var(--orange-600);
  --brand-contrast: var(--ink-900);
  --accent: var(--yellow-500);
  --accent-deep: var(--red-600);

  --bg-page: var(--ink-900);
  --bg-page-light: var(--ink-050);
  --surface-card: var(--ink-800);
  --surface-card-light: var(--white);
  --surface-raised: var(--ink-700);
  --surface-sunken: #000000;
  --surface-brand: var(--orange-500);

  --text-heading: var(--yellow-500);
  --text-body: var(--cream-100);
  --text-body-invert: var(--ink-700);
  --text-muted: var(--ink-300);
  --text-muted-invert: var(--ink-400);
  --text-price: var(--white);
  --text-on-brand: var(--ink-900);
  --text-link: var(--orange-500);
  --text-link-hover: var(--yellow-500);

  --border-hairline: rgba(253, 239, 214, 0.22);
  --border-strong: var(--cream-100);
  --border-light: var(--ink-200);
  --border-brand: var(--orange-500);

  --focus-ring: var(--yellow-500);
  --overlay-scrim: rgba(9, 9, 9, 0.78);

  /* Gradients lifted from the logo lettering */
  --gradient-xpress: linear-gradient(96deg, var(--red-600) 0%, var(--red-500) 42%, var(--flame-500) 100%);
  --gradient-cream: linear-gradient(180deg, var(--white) 0%, var(--cream-200) 100%);
  --gradient-heat: linear-gradient(180deg, var(--yellow-500) 0%, var(--orange-500) 100%);
  --gradient-protect: linear-gradient(180deg, rgba(9, 9, 9, 0) 0%, rgba(9, 9, 9, 0.85) 72%, #090909 100%); /* @kind color */
}