/* ==========================================================================
   TOKENS — Imperial Fence Inc.
   Palette sampled directly from assets/img/logo.png (gold #F0C830 / navy #003048).
   No red exists in this brand. Do not introduce any.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --navy:        #003048;
  --navy-deep:   #00212F;
  --navy-2:      #0A3F5C;
  --navy-3:      #14536F;
  --iron:        #385068;

  --gold:        #F0C830;
  --gold-deep:   #D4AC1D;
  /* Only shade of gold usable as TEXT on light surfaces.
     Verified >= 4.5:1 on --white, --bone, and --bone-2. */
  --gold-dark:   #7A5F07;
  --gold-soft:   #FBF3DA;

  /* ---- Neutrals ---- */
  --bone:        #F8F6F2;
  --bone-2:      #EDE9E2;
  --bone-3:      #E4DED2;
  --line:        #DED8CD;
  --white:       #FFFFFF;

  /* ---- Text (all verified >= 4.5:1 on their intended background) ---- */
  --text:        #14202B;   /* on bone: 14.8:1 */
  --text-body:   #44525F;   /* on bone: 7.1:1  */
  --text-muted:  #5A6875;   /* on bone: 5.4:1  */
  --text-on-dark:      #FFFFFF;
  --text-on-dark-soft: #C3D2DC;  /* on navy: 9.4:1 */

  /* ---- 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.75rem, 1.6rem + 4.6vw, 6.25rem);
  --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(0,33,47,.05), 0 2px 6px rgba(0,33,47,.05);
  --sh-2: 0 1px 2px rgba(0,33,47,.06), 0 4px 12px rgba(0,33,47,.07), 0 10px 24px rgba(0,33,47,.06);
  --sh-3: 0 1px 2px rgba(0,33,47,.06), 0 6px 18px rgba(0,33,47,.09), 0 18px 44px rgba(0,33,47,.10);
  --sh-4: 0 2px 4px rgba(0,33,47,.08), 0 12px 28px rgba(0,33,47,.12), 0 32px 72px rgba(0,33,47,.16);
  --sh-gold: 0 2px 6px rgba(168,133,15,.20), 0 10px 26px rgba(168,133,15,.24);

  /* ---- Glass ---- */
  --glass-dark:  rgba(0,33,47,.88);
  --glass-light: rgba(255,255,255,.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;
}