/* ===========================================================================
   AIX Mediterran — design tokens (the project's root CSS)
   Plain CSS custom properties. No framework, no CDN.
   Palette carried over from the old site; price colour darkened to pass WCAG AA
   (the old gold #d4a017 failed on white — see design decisions log §4.6).
   Naming convention for components: BEM  → .dish-row  .dish-row__price  .dish-row--inactive
   =========================================================================== */

:root {
  /* ---- Aegean blue — primary (headings, nav, buttons, links, dividers) ---- */
  --color-aegean-50:  #eaf3fb;
  --color-aegean-100: #d2e6f7;
  --color-aegean-200: #a6ccef;
  --color-aegean-300: #6ea9e0;
  --color-aegean-400: #3d86d0;
  --color-aegean-500: #1565c0;
  --color-aegean-600: #0e5fb0; /* primary */
  --color-aegean-700: #0c4f93;
  --color-aegean-800: #0c3f73;
  --color-aegean-900: #0e3258;
  --color-aegean-950: #081f38;

  /* ---- Mustard yellow — accent (decorative / large text / on dark only) ---- */
  --color-gold-300: #f1d186;
  --color-gold-400: #e8bb4f;
  --color-gold-500: #e0a82e; /* accent — buttons, stars, on-dark accents */
  --color-gold-600: #d4a017;
  --color-gold-700: #a87d12; /* ~3.8:1 on white → large text / borders only */
  --color-gold-900: #8a6910; /* ~5:1 on white  → accessible for normal text */

  /* ---- Neutrals ---- */
  --color-white:        #ffffff;
  --color-cream:        #faf8f3; /* page background */
  --color-cream-200:    #efe9dd; /* dividers, muted chips */
  --color-charcoal:     #1a1a1a; /* body text */
  --color-charcoal-soft:#565656; /* secondary text */

  /* ---- Semantic roles ---- */
  --color-bg:            var(--color-cream);
  --color-surface:       var(--color-white);
  --color-text:          var(--color-charcoal);
  --color-text-muted:    var(--color-charcoal-soft);
  --color-primary:       var(--color-aegean-600);
  --color-primary-hover: var(--color-aegean-700);
  --color-on-primary:    var(--color-white);
  --color-accent:        var(--color-gold-500);   /* decorative / large only */
  --color-price:         var(--color-gold-900);   /* AA on white/cream (≥4.5:1) */
  --color-link:          var(--color-aegean-600);
  --color-border:        var(--color-cream-200);
  --color-border-strong: var(--color-aegean-100);
  --color-focus:         var(--color-aegean-500); /* focus-visible ring */

  /* status */
  --color-success:  #1f7a4d;
  --color-success-bg: #e7f4ec;
  --color-error:    #b3261e;
  --color-error-bg: #fbeae9;
  --color-info-bg:  var(--color-aegean-50);

  /* hero photo scrim — blue, never dark */
  --scrim-hero: linear-gradient(180deg, rgba(14,95,176,.42), rgba(12,63,115,.72));

  /* ---- Typography ---------------------------------------------------------
     Self-hosted (static/css/fonts.css). Both are SIL OFL 1.1.
     Headings: Forum (uppercase display). Body: Jost. ------------------------ */
  --font-heading: "Forum", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Jost", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale (fluid where it matters). Base 16px. */
  --fs-hero:   clamp(2.25rem, 5vw + 0.5rem, 5rem); /* 36 → 80px  H1 hero (gentler on mobile) */
  --fs-h1:     clamp(2.25rem, 4vw + 1rem, 3.75rem);/* 36 → 60px  page H1 */
  --fs-h2:     clamp(1.875rem, 2vw + 1rem, 2.25rem);/* 30 → 36px section */
  --fs-h3:     1.375rem;  /* 22px card / dish name */
  --fs-lg:     1.125rem;  /* 18px lead / price */
  --fs-base:   1rem;      /* 16px body */
  --fs-sm:     0.9375rem; /* 15px description */
  --fs-xs:     0.8125rem; /* 13px nav / meta */
  --fs-2xs:    0.75rem;   /* 12px eyebrow (min 14px for allergen text elsewhere) */

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.55;

  --tracking-display: 0.055em; /* uppercase headings */
  --tracking-eyebrow: 0.25em;
  --tracking-nav:     0.12em;

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

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-8: 3rem;    --sp-10: 4rem;
  --sp-12: 5rem;    --sp-16: 7rem;

  /* ---- Container widths (per §DESIGN-SPEC) ---- */
  --container-sm:  42rem;  /* 672  legal */
  --container-md:  56rem;  /* 896  reservations */
  --container-lg:  64rem;  /* 1024 menu */
  --container-xl:  72rem;  /* 1152 header/contact/hero */
  --container-2xl: 80rem;  /* 1280 cards/story/footer */
  --gutter: clamp(1.25rem, 4vw, 1.5rem);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius:    8px;   /* buttons */
  --radius-lg: 10px;  /* cards, photos */
  --radius-pill: 999px;

  /* ---- Shadows (soft, blue-tinted) ---- */
  --shadow-soft: 0 8px 28px -16px rgba(14,63,115,.20);
  --shadow-card: 0 18px 50px -24px rgba(14,63,115,.25);

  /* ---- Motion ---- */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover:  .3s;
  --dur-reveal: .7s;
  --dur-load:   .8s;

  /* ---- Breakpoints (reference; used in @media, not as custom props) ----
     sm 40rem/640 · md 48rem/768 · lg 64rem/1024 (desktop nav) · xl 80rem/1280 (social rail) */

  --tap-min: 44px; /* minimum touch target */
  color-scheme: light;
}

/* ---- Minimal base reset / root typography ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--fw-regular); line-height: var(--lh-snug); margin: 0; }
img, svg, video { max-width: 100%; display: block; }
a { color: var(--color-link); }

/* Accessible focus for every interactive element */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Uppercase editorial display heading */
.display { text-transform: uppercase; letter-spacing: var(--tracking-display); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}