/* ============================================================================
   EXTERA — Design tokens (v3, elite rebuild). Brief v1.2.
   Locked brand: one blue ramp; steel #5C81AB = action only; Anybody 800 / width
   125 / UPPERCASE display; Instrument Sans body; no gradients (deepwater photo
   scrims allowed); tri-bar logo once per surface, never restyled.
   ========================================================================== */

:root {
  /* --- Blue ramp (one hue, three depths) --------------------------------- */
  --x-blue-50:#F2F6FA; --x-blue-100:#E4EDF5; --x-blue-200:#C9DAEA; /* Sky */
  --x-blue-300:#A9C2DA; --x-blue-400:#82A1C2; --x-blue-500:#5C81AB; /* Steel */
  --x-blue-600:#4A6B91; --x-blue-700:#3A5675; --x-blue-800:#22303F;
  --x-blue-900:#192736; /* Deepwater — one deep navy (unified 2026-07-12; was #161F29) */
  --deepwater-2:var(--x-blue-900); /* legacy alias → Deepwater; near-black abyss #0E141B retired */

  /* --- Clean-photo matte fade (identical to a white layer @ blend "difference") --
     Unifies mixed-lighting job photos. Applied as filter:contrast() on .ph + .ba
     photos only (headers/cards already carry their own scrim). One place to tune:
     .80 ≈ 10%  ·  .72 ≈ 14%  ·  .64 ≈ 18% (current)  ·  lower = stronger fade. */
  --photo-fade:.64;

  /* --- Neutral ramp ------------------------------------------------------- */
  --x-grey-0:#FFFFFF; --x-grey-50:#F8FAFC; --x-grey-100:#EDF1F6; /* Mist */
  --x-grey-150:#E7ECF2; --x-grey-200:#E0E7EF; --x-grey-300:#C2CBD8;
  --x-grey-400:#9AA7B8; --x-grey-500:#8A96A8; --x-grey-600:#5D6B80;
  --x-grey-700:#46536A; --x-grey-800:#33415C; /* Ink */

  /* --- Named ------------------------------------------------------------- */
  --deepwater:var(--x-blue-900); --steel:var(--x-blue-500); --sky:var(--x-blue-200);
  --mist:var(--x-grey-100); --ink:var(--x-grey-800); --white:#FFFFFF;
  --paper:#FBFCFE; /* editorial off-white */

  /* --- Functional (forms/states only) ------------------------------------ */
  --confirm:#2F7D5B; --caution:#A87B2F; --error:#B4552F;

  /* --- Semantic ---------------------------------------------------------- */
  --text-heading:var(--deepwater); --text-body:var(--ink);
  --text-secondary:var(--x-grey-600); --text-muted:#6A7688; /* AA on white/paper; was x-grey-500 #8A96A8 (3.0:1, failed) */
  --text-on-dark:#FFFFFF; --text-on-dark-2:rgba(233,240,248,.66);
  --text-on-dark-3:rgba(233,240,248,.40); --text-sky:var(--sky);
  --action:var(--steel); --action-hover:#6E93BC; --action-press:var(--x-blue-600);
  --hairline:var(--x-grey-200); --hairline-2:var(--x-grey-150);
  --line:var(--x-grey-300); --line-dark:rgba(201,218,234,.16);
  --surface-page:var(--white); --surface-soft:var(--mist); --surface-dark:var(--deepwater);

  /* Authenticity gold — a DELIBERATE, single exception to the one-blue rule.
     Scoped to the guarantee certificate ONLY (its seal + engraved frame line).
     Signals official/registered. Never use as a UI, link or action colour. */
  --gold:#B0842A; --gold-2:#E7C878; --gold-line:#C9A24B;

  /* --- Type -------------------------------------------------------------- */
  --font-display:'Anybody',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display-stretch:125%;

  /* Editorial scale — dramatic on desktop, controlled on mobile */
  --fs-d1:clamp(2.85rem, 1.7rem + 5.6vw, 5.25rem);     /* 46 → 84  hero      */
  --fs-d2:clamp(1.85rem, 1.2rem + 2.9vw, 3.5rem);      /* 30 → 56            */
  --fs-price:clamp(4.25rem, 2.2rem + 11vw, 10rem);     /* 68 → 160 signature */
  --fs-h2:clamp(1.85rem, 1.35rem + 2.4vw, 2.75rem);    /* 30 → 44            */
  --fs-h3:clamp(1.2rem, 1.08rem + .55vw, 1.5rem);      /* 19 → 24            */
  --fs-eyebrow:.75rem; --fs-lead:clamp(1.125rem, 1.02rem + .5vw, 1.35rem); /* 18→22 */
  --fs-body:1.0625rem; --fs-small:.8125rem; --fs-fine:.6875rem; --fs-card-title:1.0625rem;

  --lh-display:1.0; --lh-tight:1.12; --lh-body:1.62;
  --tk-display:.005em; --tk-tight:-.01em; --tk-eyebrow:.24em;

  /* --- Spacing ----------------------------------------------------------- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;
  --section-y:clamp(4.5rem, 3rem + 7vw, 9rem);   /* 72 → 144 — generous, editorial */
  --shell-max:78rem;                              /* 1248 */
  --shell-narrow:52rem;
  --shell-pad:clamp(1.35rem, .4rem + 4vw, 4.5rem);/* 22 → 72 */

  /* --- Radii ------------------------------------------------------------- */
  --radius-sm:6px; --radius-md:9px; --radius-lg:14px; --radius-xl:18px;
  --radius-2xl:24px; --radius-pill:999px;

  /* --- Shadows / depth --------------------------------------------------- */
  --shadow-xs:0 1px 2px rgba(22,31,41,.05);
  --shadow-card:0 2px 10px rgba(22,31,41,.06),0 1px 2px rgba(22,31,41,.04);
  --shadow-float:0 18px 44px -18px rgba(22,31,41,.22),0 2px 8px rgba(22,31,41,.06);
  --shadow-deep:0 40px 80px -28px rgba(11,17,24,.55);
  --focus-ring:0 0 0 3px rgba(92,129,171,.4);

  /* --- Grain (adds tactile depth without gradients) ---------------------- */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  /* --- Motion ------------------------------------------------------------ */
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms; --dur:280ms; --dur-slow:640ms;
}