/* ==========================================================================
   TOKENS — New England Automatic Gate
   Palette sampled directly from the brand mark ("Automatic Gate 2.png"):
     ink   #182230  (monogram / gate / ring; darkest core #0C1521)
     paper #FAF8F7  (the mark's warm off-white field)
   The mark is monochrome, so the accent is a chosen one: aged brass, picked to
   read as gate hardware rather than yellow. --brass is legible BOTH ways —
   6.2:1 as text on --ink, and 6.2:1 with ink text sitting on it as a fill.
   No red exists in this brand. Do not introduce any.
   ========================================================================== */

:root {
  /* ---- Brand: ink ---- */
  --ink:         #182230;   /* sampled: mean of the mark's strokes */
  --ink-deep:    #0C1521;   /* sampled: the mark's darkest core */
  --ink-2:       #24303F;
  --ink-3:       #2F3D4E;
  --slate:       #3A4757;   /* on paper: 8.9:1 */
  --iron:        #59677A;   /* on paper: 5.4:1 */

  /* ---- Brand: aged brass ---- */
  --brass:       #BF9C5C;   /* on ink 6.2:1 — and ink on it 6.2:1 */
  --brass-deep:  #B08D4F;   /* hover / pressed */
  --brass-dark:  #8A6D33;
  /* Only shades of brass usable as TEXT on light surfaces. */
  --brass-text:  #6B5324;   /* on paper: 6.9:1 */
  --brass-soft:  #F5EDE0;
  --brass-line:  #E3D3B4;

  /* ---- Neutrals: warm paper ---- */
  --paper:       #FAF8F7;   /* sampled: the mark's field */
  --paper-2:     #F1EDEA;
  --paper-3:     #E8E2DC;
  --line:        #E2DCD6;
  --line-strong: #D3CBC2;
  --stone:       #C7BCB0;
  --white:       #FFFFFF;

  /* ---- Text (all verified >= 4.5:1 on their intended background) ---- */
  --text:        #182230;   /* on paper: 15.1:1 */
  --text-body:   #3A4757;   /* on paper:  8.9:1 */
  --text-muted:  #59677A;   /* on paper:  5.4:1 */
  --text-on-dark:      #FAF8F7;
  --text-on-dark-soft: #C7BCB0;  /* on ink: 8.6:1 */

  /* ---- Legacy aliases ----------------------------------------------------
     The previous palette (teal-navy #003048 / yellow #F0C830) is referenced
     throughout components.css and layout.css. These keep every existing rule
     working while it is retired. Prefer the names above in new code. */
  --navy:        var(--ink);
  --navy-deep:   var(--ink-deep);
  --navy-2:      var(--ink-2);
  --navy-3:      var(--ink-3);
  --gold:        var(--brass);
  --gold-deep:   var(--brass-deep);
  --gold-dark:   var(--brass-text);
  --gold-soft:   var(--brass-soft);
  --bone:        var(--paper);
  --bone-2:      var(--paper-2);
  --bone-3:      var(--paper-3);

  /* ---- Semantic ---- */
  --ok:          #1B7A4B;
  --err:         #B3261E;
  --err-soft:    #FDECEA;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:    clamp(2.375rem, 1.4rem + 3.6vw, 4.75rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --fs-h2:      clamp(1.875rem, 1.35rem + 2.1vw, 3.125rem);
  --fs-h3:      clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --fs-h4:      clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      0.9375rem;   /* 15px */
  --fs-xs:      0.8125rem;   /* 13px */
  --fs-eyebrow: 0.75rem;

  --lh-tight:   1.06;
  --lh-snug:    1.22;
  --lh-body:    1.65;
  --ls-display: -0.03em;
  --ls-eyebrow: 0.18em;
  --measure:    68ch;

  /* ---- Spacing (8pt) ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;
  /* Vertical rhythm. Section padding is applied per-side, so the gap between
     two adjacent sections is 2x this value — keep it tight. */
  --section-y: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);

  /* ---- Layout ---- */
  --container:   1280px;
  --container-narrow: 880px;
  --gutter:      clamp(1.25rem, 0.9rem + 1.6vw, 3rem);

  /* ---- Radii ---- */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-pill: 999px;

  /* ---- Layered shadows (never a single flat shadow) ---- */
  --sh-1: 0 1px 2px rgba(12,21,33,.05), 0 2px 6px rgba(12,21,33,.05);
  --sh-2: 0 1px 2px rgba(12,21,33,.06), 0 4px 12px rgba(12,21,33,.07), 0 10px 24px rgba(12,21,33,.06);
  --sh-3: 0 1px 2px rgba(12,21,33,.06), 0 6px 18px rgba(12,21,33,.09), 0 18px 44px rgba(12,21,33,.10);
  --sh-4: 0 2px 4px rgba(12,21,33,.08), 0 12px 28px rgba(12,21,33,.12), 0 32px 72px rgba(12,21,33,.16);
  --sh-gold: 0 2px 6px rgba(138,109,51,.20), 0 10px 26px rgba(138,109,51,.24);
  --sh-brass: var(--sh-gold);

  /* ---- Glass ---- */
  --glass-dark:  rgba(12,21,33,.88);
  --glass-light: rgba(250,248,247,.82);
  --glass-brd:   rgba(255,255,255,.14);
  --glass-blur:  blur(18px) saturate(160%);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-io:   cubic-bezier(.65,0,.35,1);
  --t-fast:    150ms;
  --t-base:    250ms;
  --t-slow:    400ms;

  /* ---- Z-index scale (10 sticky / 300 dropdown / 999 modal / 9999 toast) ---- */
  --z-base:     1;
  --z-raised:   5;
  --z-sticky:   10;
  --z-header:   20;
  --z-dropdown: 300;
  --z-overlay:  900;
  --z-modal:    999;
  --z-toast:    9999;

  /* ---- Mobile sticky bar height (used to offset body padding) ---- */
  --bar-h: 4.25rem;
}