/* ============================================================
   VISA INFINITE TIERS — TOKENS
   Design system: Atlas Card — "midnight vault with a single
   sapphire light". Pure black canvas, achromatic surface
   stepping, one chromatic accent, geometric sans + mono.

   Visa branding takes the accent slot: Visa Blue #1434CB
   stands in for Atlas's Sapphire Volt. It is the ONLY
   chromatic voice in the interface. No second accent.
   ============================================================ */

:root {
  /* ---------- 1. COLOUR -------------------------------------
     Taken from the card family itself: deep navy body, copper
     edge and lockup, pearl highlight. The Atlas discipline is
     unchanged — a dark ground, one chromatic voice, nothing
     else — but the ground is now the navy of the card and the
     accent is the copper struck into it.                      */
  --navy-void:  #070C18;   /* page canvas — the card in shadow */
  --navy-deep:  #0E1628;   /* first surface step               */
  --navy-mid:   #16203A;   /* second step, hover, panels       */
  --navy-lift:  #1E2A48;   /* hairlines at their strongest     */

  --copper:       #C98456; /* the accent. Rare by design.      */
  --copper-lift:  #E0A377; /* copper as TEXT on dark (AA)      */
  --copper-deep:  #A96238; /* pressed / hover fills            */

  --pearl:     #F4F2EF;    /* primary text — the pearl card    */
  --frost:     #C9CDD6;    /* secondary text, cool             */
  --ash:       #868D9C;    /* muted metadata                   */
  --ghost:     #4C5464;    /* disabled, empty states           */
  --white:     #ffffff;    /* logo lockups only                */

  /* semantic aliases — components read these, not the ladder  */
  --bg:          var(--navy-void);
  --bg-2:        var(--navy-deep);
  --bg-3:        var(--navy-mid);
  --ink:         var(--pearl);
  --ink-dim:     var(--frost);
  --ink-faint:   var(--ash);
  --ink-ghost:   var(--ghost);
  --line:        rgb(244 242 239 / .09);
  --line-strong: rgb(244 242 239 / .17);
  --surface:     rgb(244 242 239 / .04);
  --surface-hi:  rgb(244 242 239 / .07);
  --accent:      var(--copper);
  --accent-ink:  #0A1020;   /* navy type on a copper fill      */
  --accent-soft: color-mix(in oklab, var(--copper) 20%, transparent);

  /* ---------- 2. TYPE ---------------------------------------
     Inter substitutes Sequel Sans; JetBrains Mono substitutes
     ApercuMono. Hierarchy comes from size, never from weight
     contrast — 400 and 700 only, tracking near zero.         */
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular: 400;
  --fw-bold:    700;

  --text-caption:   10px;   --leading-caption:   1.5;
  --text-micro:     12px;   --leading-micro:     1.5;
  --text-body:      15px;   --leading-body:      1.67;
  --text-body-lg:   17px;   --leading-body-lg:   1.45;
  --text-subheading: 23px;  --leading-subheading: 1.3;
  --text-heading:   28px;   --leading-heading:   1.4;

  /* Atlas tops out at 28px on a two-section landing page. This
     site carries nine sections, so one display step above it
     does the section-title work; everything else is Atlas as
     specified.                                                */
  --text-display: clamp(30px, 1.4rem + 2.1vw, 50px);
  --text-hero:    clamp(38px, 1.2rem + 4.4vw, 82px);
  --tracking-display: -0.022em;

  /* ---------- 3. SHAPE -------------------------------------- */
  --radius-tag:    4px;
  --radius-input:  8px;
  --radius-card:   12px;
  --radius-button: 24px;
  --radius-pill:   128px;
  --border-w: 1px;

  /* ---------- 4. SPACE -------------------------------------- */
  --s-8: 8px;   --s-16: 16px; --s-24: 24px; --s-32: 32px;
  --s-48: 48px; --s-64: 64px; --s-88: 88px; --s-104: 104px;
  --s-128: 128px; --s-144: 144px; --s-176: 176px;

  --section-y: clamp(64px, 7vw, 128px);
  --gutter:    clamp(20px, 4vw, 48px);
  --measure:   640px;   /* the centred narrative column       */
  --maxw:      1180px;  /* data components that cannot centre */

  /* ---------- 5. MOTION ------------------------------------- */
  --motion:   1;
  --dur:      calc(.7s * var(--motion));
  --dur-fast: calc(.28s * var(--motion));
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --stagger:   calc(34ms * var(--motion));

  color-scheme: dark;
}

:root[data-motion="none"] { --motion: 0; --stagger: 0ms; }
@media (prefers-reduced-motion: reduce) { :root { --motion: 0; --stagger: 0ms; } }