/* =====================================================================
   Restaurant brand site v2: design tokens.
   The agency engine's token set (agency-site-v2/css/tokens.css), retuned
   for restaurants: the dining room after dark. Espresso, linen, one brass
   hairline, and a printed menu card (paper) for the price and the footer.
   Luxury, nothing pops, lights just appear. Bigger type, more air.

   Breakpoints (literals, copy exactly):
     phone      (max-width: 768px)
     desktop    (min-width: 769px)
     wide       (min-width: 1536px)
     hover      (hover: hover) and (pointer: fine)
     reduced    (prefers-reduced-motion: reduce)
   ===================================================================== */

:root {
  /* ---------- Colour ---------- */
  --c-bg: #14100d;             /* page: espresso */
  --c-card: #1f1813;           /* glass base, nav, rows */
  --c-fg: #f4ecdf;             /* linen text */
  --c-fg-2: rgba(244, 236, 223, 0.76);
  --c-fg-3: rgba(244, 236, 223, 0.56);
  --c-paper: #f6efe3;          /* the printed card: price card, footer slab, menu */
  --c-paper-2: #ebe1cf;
  --c-ink: #17110e;            /* text on paper */
  --c-ink-2: rgba(23, 17, 14, 0.66);
  --c-ink-3: rgba(23, 17, 14, 0.5);
  --c-brass: #d3b483;          /* one accent: rules, small marks, focus */
  --c-brass-dim: rgba(211, 180, 131, 0.5);
  --c-secondary: #2a211b;      /* secondary pill fill */
  --c-secondary-fg: #efe6d8;
  --c-glow: #6b4a2d;           /* ambient warmth */
  --c-hair: rgba(244, 236, 223, 0.1);
  --c-hair-ink: rgba(23, 17, 14, 0.16);
  --c-well: rgba(244, 236, 223, 0.05);
  --c-focus: rgba(211, 180, 131, 0.85);
  --c-error: #e7a9a1;

  /* Light field (Casa Quilla rhythm: dark and light sections alternate) */
  --c-field: #f3eee6;          /* light section background */
  --c-field-2: #e8e0d2;        /* quieter light fill, hairlines on light */
  --c-card-light: #fbf8f2;     /* cards and form on light */
  --c-ink-hair: rgba(23, 17, 14, 0.12);

  /* ---------- Type ---------- */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-head: 400;              /* Fraunces at 400 reads like a printed card */
  --lh-tight: 1.06;
  --lh-snug: 1.4;
  --lh-body: 1.6;
  --tracking-head: -0.015em;

  /* Fluid scale, desktop (769px and up). Raised from the agency set: body 17 to 19. */
  --fs-2xs: clamp(0.75rem, 0.7vw, 0.8125rem);
  --fs-xs:  clamp(0.8125rem, 0.78vw, 0.875rem);
  --fs-sm:  clamp(0.9rem, 0.9vw, 0.975rem);        /* 14.4 to 15.6: pills, labels */
  --fs-base: clamp(1.0625rem, 1.15vw, 1.1875rem);  /* 17 to 19: body */
  --fs-lg:  clamp(1.125rem, 1.25vw, 1.3125rem);
  --fs-xl:  clamp(1.1875rem, 1.45vw, 1.5rem);      /* sublines */
  --fs-2xl: clamp(1.3125rem, 1.6vw, 1.75rem);      /* card titles */
  --fs-3xl: clamp(1.5rem, 2vw, 2.1rem);
  --fs-4xl: clamp(1.9rem, 2.6vw, 2.7rem);
  --fs-5xl: clamp(2.4rem, 3.4vw, 3.6rem);          /* big price */
  --fs-6xl: clamp(2.5rem, 3.75vw, 3.9rem);         /* section h2 */
  --fs-7xl: clamp(2.8rem, 4.6vw, 4.8rem);          /* hero h1 */
  --fs-8xl: clamp(3.4rem, 5.4vw, 5.6rem);
  --fs-input: max(16px, var(--fs-base));

  --fs-h1: var(--fs-7xl);
  --fs-h2: var(--fs-6xl);
  --fs-h3: var(--fs-2xl);
  --fs-sub: var(--fs-xl);
  --fs-body: var(--fs-base);
  --fs-label: var(--fs-sm);

  /* ---------- Layout ---------- */
  /* Casa Quilla frame: a container and a gutter; desktop goes edge to edge (block at the end). */
  --container: 1360px;
  --gutter: 40px;
  --content-w: min(calc(var(--container) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  --content-narrow: min(var(--content-w), 48rem);
  /* One spacing scale (redesign 2026-10-31): section 128 desktop / 88 phone, card 32 / 24, grid gap 24 / 16 */
  --sec-y: 8rem;
  --pad-card: 2rem;
  --gap: 1.5rem;
  --sec-pad-y: var(--sec-y);
  --head-gap: 0.75rem;
  --head-to-body: 3rem;
  --grid-gap: 1.5rem;
  --nav-top: 0px;
  --nav-h: 72px;
  --nav-offset: calc(var(--nav-top) + var(--nav-h) + 22px);
  --tap: 44px;

  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-7: 1.75rem;  --sp-8: 2rem;
  --sp-10: 2.5rem;  --sp-12: 3rem;   --sp-16: 4rem;    --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---------- Radius ---------- */
  --r-card: 1.25rem;
  --r-inner: 0.75rem;
  --r-paper: 0.5rem;           /* a printed card has only a little rounding */
  --r-pill: 999px;
  --r-round: 50%;

  /* ---------- Glass ---------- */
  --glass-fill: linear-gradient(to bottom right, rgba(31, 24, 19, 0.82), rgba(31, 24, 19, 0.5));
  --glass-fill-solid: #1f1813;
  --glass-border: 1px solid rgba(244, 236, 223, 0.08);
  --glass-blur: blur(10px);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --well-fill: var(--c-well);
  --well-shadow: 0 1px 3px rgba(244, 236, 223, 0.05);

  /* Paper (the printed card) */
  --paper-fill: linear-gradient(170deg, #faf5ea 0%, var(--c-paper) 45%, var(--c-paper-2) 100%);
  --paper-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

  --card-pad: 1.5rem;
  --card-pad-lg: 2.25rem;

  /* ---------- Buttons ---------- */
  --btn-h: 48px;
  --btn-pad-x: 1.6rem;
  --btn-round: 44px;
  --btn-round-visual: 38px;
  --btn-primary-fill: linear-gradient(165deg, #fbf6ec 0%, var(--c-paper) 45%, #e6d9c2 100%);
  --btn-primary-fg: var(--c-ink);
  --btn-primary-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px 0 rgba(23, 17, 14, 0.12),
    0 6px 16px -4px rgba(246, 239, 227, 0.2);
  --btn-secondary-fill: linear-gradient(to bottom right, rgba(42, 33, 27, 0.85), #2a211b);
  --btn-secondary-fg: var(--c-secondary-fg);
  --btn-secondary-border: 1px solid rgba(244, 236, 223, 0.12);
  --btn-ink-fill: var(--c-ink);          /* button on paper */
  --btn-ink-fg: var(--c-paper);
  --chip-fill: linear-gradient(165deg, rgba(244, 236, 223, 0.12), rgba(244, 236, 223, 0.03));
  --chip-border: 1px solid rgba(244, 236, 223, 0.1);

  /* ---------- Masks ---------- */
  --mask-x: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  --mask-y: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);

  /* ---------- Motion: one family, 250 to 600ms, nothing bounces ---------- */
  --ease-fog: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-glide: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-roll: cubic-bezier(0, 0, 0.2, 1);

  --dur-word: 600ms;
  --stagger-word: 40ms;
  --blur-word: 8px;
  --dur-rise: 600ms;
  --rise-y: 14px;
  --dur-light: 900ms;
  --dur-glide: 600ms;
  --dur-accordion: 320ms;
  --dur-ui: 250ms;
  --dur-hover: 200ms;
  --dur-roll: 350ms;
  --stagger-roll: 10ms;
  --stagger-item: 90ms;
  --kb-dur: 28s;               /* hero still: slow cinematic drift */

  --reveal-line: 0.88;
  --scrub-tau: 140ms;

  /* ---------- Layers ---------- */
  --z-ambient: 0;
  --z-sec: 1;
  --z-foot: 1;
  --z-main: 2;
  --z-nav: 100;
  --z-menu: 101;
  --z-skip: 1000;
}

@media (min-width: 1536px) {
  :root {
    --fs-h1: var(--fs-8xl);
    --fs-h2: var(--fs-7xl);
    --card-pad: 1.75rem;
    --card-pad-lg: 2.5rem;
    --nav-h: 76px;
  }
}

/* ---------- Phone (768px and below) ---------- */
@media (max-width: 768px) {
  :root {
    --fs-2xs: max(12px, 2.6vw);
    --fs-xs:  max(13px, 2.9vw);
    --fs-sm:  max(14px, 3.2vw);
    --fs-base: max(17px, 3.6vw);
    --fs-lg:  max(17px, 3.9vw);
    --fs-xl:  max(18px, 4.4vw);
    --fs-2xl: max(20px, 5.2vw);
    --fs-3xl: max(22px, 6vw);
    --fs-4xl: max(26px, 7vw);
    --fs-5xl: max(34px, 9.5vw);
    --fs-6xl: max(31px, 8.6vw);
    --fs-7xl: clamp(2.4rem, 8.5vw, 4.8rem);
    --fs-8xl: max(40px, 12vw);

    --gutter: 20px;
    --content-narrow: var(--content-w);
    --sec-y: 5.5rem;
    --pad-card: 1.5rem;
    --gap: 1rem;
    --head-to-body: 2rem;
    --nav-top: 0px;
    --nav-h: 64px;
    --card-pad: 1.25rem;
    --card-pad-lg: 1.5rem;
    --reveal-line: 0.92;
    --dur-word: 420ms;
  }
}

/* ---------- Reduced motion: finished state, instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-word: 0ms; --stagger-word: 0ms; --blur-word: 0px;
    --dur-rise: 0ms; --rise-y: 0px; --dur-light: 0ms; --dur-glide: 0ms;
    --dur-accordion: 0ms; --dur-ui: 0ms; --dur-roll: 0ms; --stagger-roll: 0ms; --stagger-item: 0ms;
  }
}

/* Desktop wide (Mason 2026-10-18, Casa Quilla frame): PC uses the full screen, small edge margins. Phones unchanged. */
@media (min-width: 1024px) {
  :root { --container: 100vw !important; --gutter: clamp(32px, 3.4vw, 56px) !important; }
}