/* ==========================================================================
   Seven Bites — Design tokens
   Colours sampled directly from the approved UI showcase.
   Change a value here and it updates across every page.
   ========================================================================== */

:root {
  /* Brand */
  --c-yellow: #fcd206;
  --c-yellow-hover: #f2c600;
  --c-yellow-soft: #fff4bf;
  --c-yellow-tint: #fffaf0;
  --c-gold: #d9a521;
  --c-gold-light: #f6d36b;

  --c-navy: #0a1520;
  --c-navy-2: #111d29;
  --c-navy-3: #1a2734;
  --c-navy-line: rgba(255, 255, 255, 0.08);

  /* Surfaces */
  --c-page: #f7f6f0;
  --c-surface: #ffffff;
  --c-surface-2: #fbfaf5;
  --c-tile: #f3efe4;
  --c-border: #ece8dc;
  --c-border-strong: #ddd7c7;

  /* Text */
  --c-text: #121a24;
  --c-text-2: #4a5360;
  --c-muted: #8a8f98;
  --c-on-dark: #ffffff;
  --c-on-dark-2: #b9c0c9;

  /* Status */
  --c-red: #e5484d;
  --c-green: #22a55b;
  --c-green-soft: #e3f6ea;
  --c-star: #fcb900;

  /* Typography */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Cinzel", "Times New Roman", serif;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;/* 15 */
  --fs-md: 1.0625rem;  /* 17 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 2rem;      /* 32 */
  --fs-hero: clamp(2.5rem, 1.4rem + 4.2vw, 4.25rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Spacing (4px scale) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Layout */
  --container: 1200px;
  --gutter: 16px;
  --header-h: 72px;
  --tabbar-h: 64px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadows (soft, as in the showcase) */
  --sh-card: 0 1px 2px rgba(18, 26, 36, 0.04), 0 4px 14px rgba(18, 26, 36, 0.06);
  --sh-card-hover: 0 2px 4px rgba(18, 26, 36, 0.05), 0 14px 30px rgba(18, 26, 36, 0.12);
  --sh-btn: 0 4px 12px rgba(252, 210, 6, 0.35);
  --sh-float: 0 10px 40px rgba(10, 21, 32, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 600ms;

  /* Layers */
  --z-header: 50;
  --z-tabbar: 50;
  --z-toast: 100;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 20px;
    --header-h: 80px;
  }
}