/* ==========================================================================
   TeamworkOn3 Bistro — design tokens
   The whole visual system lives here. Change a value in this file and it
   propagates everywhere; nothing below this file hard-codes a color or size.

   BLACK AND GOLD, DARK-FIRST.
   The brand gold was sampled straight out of the client's logo: the flat ring
   value is #D0A439, with the wordmark's gradient running #F0D26E -> #B7871F.
   That gold measures 2.3:1 on white — unusable for text — and 8.5:1 on black.
   So the site is built dark: black ground, gold accent, white copy. This is
   not a stylistic preference, it is the only way this brand color is legible.
   ========================================================================== */

:root {
  /* ---- Brand gold -------------------------------------------------------- */
  --accent: #d0a439;          /* the logo's flat gold — 8.53:1 on the ground */
  --accent-bright: #f0d26e;   /* the wordmark's highlight — hover, 13.3:1 */
  --accent-deep: #b7871f;     /* the wordmark's shadow — pressed, borders */
  --accent-tint: rgb(208 164 57 / 0.12);   /* wash behind gold-on-dark chips */
  --accent-line: rgb(208 164 57 / 0.34);   /* hairline in the brand color */

  /* Kept as an alias so any rule still reaching for the old name resolves to
     a legible value rather than silently falling back. */
  --accent-strong: var(--accent-bright);

  /* ---- Ground and surfaces ----------------------------------------------
     Neutrals are warm — biased toward the gold rather than a dead grey, so
     the dark tones read as deliberate against the accent.                  */
  /* WARMED 2026-09-10. This was #0a0a0a — hue 0, saturation 0, a dead neutral
     black, and the ONLY token in the palette that was not warm. Everything
     else sits in a 30-43 degree band, i.e. the brand gold with the saturation
     pulled out, which is why the gold reads as built in rather than stuck on.
     The neutral ground broke that: the header bar (40 degrees, 26% saturation)
     met it head on at the top of every page, and that junction was the one
     place the palette read as "brown" rather than "warm dark".

     Now hue 40, matching the bar and sitting beside the gold's 43. Contrast is
     unchanged to two decimal places — gold 8.53:1, white 19.79:1 — so this
     costs nothing in legibility.

     (The old comment claimed this matched the logo tile. It did not: the badge
     disc is pure #000000. Nothing is keyed to that, the logo files are all
     transparent PNGs, so there is no rectangle to give away.) */
  --night: #0b0a08;           /* page ground — warm black, hue 40 */
  --night-soft: #1c1a16;      /* warm raised panel */
  --surface: #141312;         /* card ground */

  /* The light-world token names are kept, repointed at the dark palette, so
     every component rule keeps working through one vocabulary. */
  --paper: #0b0a08;           /* = the ground */
  --paper-warm: #141312;      /* = alternating section */

  /* ---- Text -------------------------------------------------------------- */
  --ink: #ffffff;             /* primary copy — 19.8:1 */
  --ink-soft: #b5afa1;        /* secondary copy, warm grey — 9.1:1 */
  --ink-faint: #858075;       /* captions, meta */
  --on-night: #ffffff;
  --on-night-soft: #b5afa1;

  /* ---- Lines ------------------------------------------------------------- */
  --rule: #2a2621;            /* hairline on the ground */
  --rule-dark: #2a2621;
  --rule-strong: #3a342b;

  /* ---- Type --------------------------------------------------------------
     One family at two temperaments: wide-tracked uppercase for display,
     normal-tracked sentence case for reading. The logo is a heavy italic
     condensed face, so display weights run at the top of the range to sit
     comfortably beside it.                                                  */
  --font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

  /* Script accent. Used at generous sizes only — a kicker above a heading, a
     pull quote — never for anything small or load-bearing. */
  --font-script: 'Allura', 'Snell Roundhand', 'Apple Chancery', cursive;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --t-xl: clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
  --t-2xl: clamp(1.75rem, 1.55rem + 0.95vw, 2.375rem);
  --t-3xl: clamp(2.25rem, 1.85rem + 1.9vw, 3.5rem);
  --t-4xl: clamp(2.75rem, 2.0rem + 3.4vw, 5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  --track-display: 0.06em;
  --track-eyebrow: 0.18em;
  --track-button: 0.1em;

  /* ---- Space ------------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --measure: 62ch;
  --max-w: 1240px;
  --max-w-wide: 1440px;

  /* ---- Shape ------------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;
  /* Width of the black mat around the About and Menus photographs. One value
     so both components stay in step — the image's own radius is derived from
     it (--r-blob minus the mat) to keep the two curves concentric. */
  --mat: clamp(18px, 1.8vw, 28px);

  --r-blob: clamp(48px, 8vw, 110px);

  /* ---- Depth & motion ----------------------------------------------------
     Shadows do little on a black ground, so elevation is carried by surface
     tone and a gold hairline instead. These stay for the few light overlays. */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 20px 60px rgb(0 0 0 / 0.7);
  --glow-gold: 0 0 0 1px var(--accent-line), 0 10px 30px rgb(208 164 57 / 0.10);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 620ms;

  /* Film grain, drawn by the browser rather than shipped as an image tile —
     roughly 250 bytes against 30KB for a PNG. A flat black ground is the
     giveaway of a screen-only design; real print and photography have tooth. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- Chrome ------------------------------------------------------------ */
  --header-h: 96px;          /* matches the reference bar exactly */
  --header-h-sm: 72px;

  /* The reference's header is a solid colour block distinct from the page —
     that separation is most of what makes it read as a bar. This palette has
     no second hue, so the separation is warmth and lift instead of colour. */
  --header-bar: #16130d;
  --header-rule-start: 168px;    /* the hairline begins after the badge */
  --header-rule-start-sm: 96px;
  --bottombar-h: 58px;
  --z-header: 100;
  --z-bottombar: 90;
  --z-overlay: 500;
  --z-modal: 600;

  /* Scrim over hero photography. Heavier at the foot than the reference
     design used, because gold display type needs a darker bed than white. */
  --hero-scrim:
    linear-gradient(
      to right,
      rgb(10 10 10 / 0.86) 0%,
      rgb(10 10 10 / 0.62) 42%,
      rgb(10 10 10 / 0.28) 75%,
      rgb(10 10 10 / 0.25) 100%
    ),
    linear-gradient(
      to bottom,
      rgb(10 10 10 / 0.55) 0%,
      rgb(10 10 10 / 0.30) 35%,
      rgb(10 10 10 / 0.50) 70%,
      rgb(10 10 10 / 0.88) 100%
    );
}

@media (max-width: 768px) {
  :root { --header-h: var(--header-h-sm); }
}