/* Hungry Table design tokens. Colours are RGB triplets so Tailwind opacity utilities work (bg-brand/10).
   Sampled from the logo: red #EB403E to #C81B20, wordmark slate #1D2733. */
:root {
  /* Brand */
  --ht-brand: 235 64 62;        /* logo red, decorative use (marks, glows, icons) */
  --ht-brand-deep: 200 27 32;   /* logo red, deep end: use for text and surfaces that carry white text (5.8:1) */
  --ht-wine: 122 18 40;         /* mesh depth */
  --ht-navy: 44 66 118;         /* mesh cool accent, echoes the wordmark */
  --ht-rose: 244 96 104;        /* mesh warm accent */

  /* Neutrals (cool slate, like the wordmark) */
  --ht-ink: 29 39 51;           /* wordmark / headings */
  --ht-ink-deep: 13 18 26;      /* hero + footer ground */
  --ht-smoke: 84 95 110;        /* secondary text (6.5:1 on white) */
  --ht-mist: 241 243 246;
  --ht-paper: 248 249 251;

  /* Shape: outer radius = inner radius + padding (20 = 12 + 8) */
  --ht-radius-card: 20px;
  --ht-radius-inner: 12px;
  --ht-radius-ctl: 10px;

  /* Glass + hairlines */
  --ht-blur: 18px;
  --ht-glass: rgb(255 255 255 / .66);
  --ht-hairline: rgb(29 39 51 / .1);
  --ht-glass-dark: rgb(255 255 255 / .07);
  --ht-hairline-dark: rgb(255 255 255 / .16);

  /* Elevation */
  --ht-shadow-sm: 0 1px 2px rgb(29 39 51 / .05), 0 4px 12px -2px rgb(29 39 51 / .08);
  --ht-shadow-md: 0 2px 4px rgb(29 39 51 / .04), 0 14px 30px -10px rgb(29 39 51 / .16);
  --ht-shadow-lg: 0 4px 8px rgb(29 39 51 / .04), 0 28px 48px -18px rgb(29 39 51 / .26);

  /* Motion */
  --ht-ease: cubic-bezier(.2, .8, .2, 1);
  --ht-fast: 160ms;
  --ht-base: 280ms;

  /* Type: Montserrat for display + buttons, Open Sans for text + form fields */
  --ht-font-display: 'Montserrat', 'Segoe UI', sans-serif;
  --ht-font-body: 'Open Sans', 'Segoe UI', sans-serif;
  --ht-font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif; /* section headlines only */

  /* Cinematic palette: warm dark grounds and amber light (homepage, headers, dialogs) */
  --ht-ember-deep: 17 11 8;     /* warm near-black ground */
  --ht-ember: 34 21 14;         /* raised warm surface */
  --ht-amber: 255 178 92;       /* candle light, small highlights only */
  --ht-coral: 244 88 76;        /* headline accent on dark, 5.3:1 on ember-deep */
  --ht-cream: 250 244 236;      /* text on dark photos, light section ground */

  /* Thumbnail / hero accent tones until real photos arrive */
  --ht-tone-0: 235 64 62;
  --ht-tone-1: 214 130 20;
  --ht-tone-2: 232 84 40;
  --ht-tone-3: 24 120 90;
  --ht-tone-4: 130 40 120;
  --ht-tone-5: 170 20 70;

  --ht-accent: var(--ht-brand); /* main mesh colour, overridable per hero */
}
@media (max-width: 639px) { :root { --ht-blur: 12px; } }