/* 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 (24 = 16 + 8) */
  --ht-radius-card: 24px;
  --ht-radius-inner: 16px;
  --ht-radius-ctl: 12px;

  /* 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;

  /* 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; } }