/* ============================================================
   ILX TOKENS — v3 "Coastal Estate"
   Single source of truth for the Infinity visual system.
   Loaded first, before chrome and page component CSS.

   Direction: quiet coastal luxury. Near-black forest ink,
   warm ivory paper, burnished bronze accent used sparingly,
   antique gold hairlines on dark surfaces, Fraunces display
   serif for headlines, Plus Jakarta Sans for UI.
   ============================================================ */

/* ---- Self-hosted UI family (variable, 300–800) ---- */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/plus-jakarta-sans-normal-300-800-latin.woff2") format("woff2");
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ---- Forest inks ---- */
  --ilx-forest-deep:#0b1f14;
  --ilx-forest:#143020;
  --ilx-forest-mid:#2e6b4c;
  --ilx-forest-light:#5b8f72;
  --ilx-forest-ghost:#edf3ec;
  --ilx-leaf:#6e9b3d;
  --ilx-leaf-soft:#eaf1dc;
  --ilx-sage:#a8bca4;

  /* ---- Burnished bronze (action accent — use sparingly) ---- */
  --ilx-orange:#a8652a;
  --ilx-orange-deep:#8c5322;
  --ilx-orange-mid:#c58850;
  --ilx-orange-soft:#f7efe3;
  --ilx-orange-tint:#ebd9c2;

  /* ---- Antique gold (hairlines + eyebrows on dark) ---- */
  --ilx-gold:#c9b27e;
  --ilx-gold-dim:rgba(201,178,126,.45);

  /* ---- Surfaces & text ---- */
  --ilx-paper:#fbf9f4;
  --ilx-cream:#f3eee3;
  --ilx-white:#fff;
  --ilx-line:#e6e0d2;
  --ilx-line-dark:rgba(255,255,255,.13);
  --ilx-gray-50:#f5f2ea;
  --ilx-muted:#6b7263;
  --ilx-ink:#1f2a1e;
  --ilx-charcoal:#131711;

  /* ---- Type ---- */
  --ilx-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ilx-serif:"Fraunces",Georgia,serif;
  --ilx-display:"Fraunces",Georgia,serif;

  /* ---- Fluid type scale ---- */
  --ilx-fs-xs:.75rem;
  --ilx-fs-sm:.875rem;
  --ilx-fs-base:clamp(1rem,.96rem + .2vw,1.0625rem);
  --ilx-fs-lead:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  --ilx-fs-h4:clamp(1.1rem,1.05rem + .3vw,1.25rem);
  --ilx-fs-h3:clamp(1.25rem,1.1rem + .7vw,1.5rem);
  --ilx-fs-h2:clamp(1.9rem,1.4rem + 2.2vw,2.9rem);
  --ilx-fs-h1:clamp(2.5rem,1.8rem + 3.8vw,4.4rem);
  --ilx-fs-mega:clamp(2.8rem,2rem + 4.6vw,5.2rem);

  /* ---- Radius ---- */
  --ilx-r-xs:4px;
  --ilx-r-sm:8px;
  --ilx-r-md:14px;
  --ilx-r-lg:22px;
  --ilx-pill:999px;

  /* ---- Shadows — long, warm, soft ---- */
  --ilx-shadow-sm:0 1px 2px rgba(19,26,16,.04),0 4px 14px rgba(19,26,16,.05);
  --ilx-shadow-md:0 2px 6px rgba(19,26,16,.05),0 10px 28px rgba(19,26,16,.08);
  --ilx-shadow:0 6px 18px rgba(19,26,16,.07),0 24px 56px rgba(19,26,16,.12);
  --ilx-shadow-lg:0 12px 28px rgba(19,26,16,.10),0 40px 90px rgba(19,26,16,.18);
  --ilx-shadow-bronze:0 10px 30px rgba(168,101,42,.28);

  /* ---- Motion ---- */
  --ilx-ease:cubic-bezier(.22,.61,.21,1);
  --ilx-ease-out:cubic-bezier(.16,1,.3,1);
  --ilx-dur:.7s;
  --ilx-dur-fast:.32s;

  /* ---- Layout ---- */
  --ilx-wide:1240px;
  --ilx-gutter:clamp(20px,4vw,40px);
  --ilx-section-y:clamp(80px,7vw + 40px,150px);
  --ilx-header-h:78px;
}

/* Cross-document view transitions: gentle fade between pages
   (progressive enhancement — ignored by older browsers). */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
}
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.28s; }