/* ==========================================================================
   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.                  */
  --night: #0a0a0a;           /* page ground, matches the logo tile */
  --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: #0a0a0a;           /* = 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;
  --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); }
}