/* ==========================================================================
   TOKENS — brand palette, the fixed chrome heights, and the per-tier
   design deltas.

   The tier story lives here. Tiers differ in DEPTH (radius, shadow, motion,
   type scale), never in PRESENCE — even Lite has real shadows and hover.
   Nothing looks unfinished; the cheaper tiers are simply plainer.

   CHROME HEIGHTS ARE CONSTANTS, ON PURPOSE.
   These used to be measured at runtime and written back as variables, which
   meant anything that reflowed a bar (web fonts landing, the demo bar
   wrapping, the mobile nav drawer opening) re-padded every page and could
   feed back into itself. The bars now have fixed heights they cannot drift
   from, and every offset below is derived from these three numbers.
   ========================================================================== */

:root{
  /* brand */
  --marine:#0B3D5C;
  --bay:#1C6E8C;
  --amber:#F4A950;
  --sand:#FDF8F0;
  --tide:#0F1F26;
  --mist:#E8EDF0;
  --white:#ffffff;
  --ink-soft:#4c6470;
  --ink-mute:#6b8089;
  --line:rgba(11,61,92,.10);

  /* fixed chrome — see note above. Overridden per breakpoint in responsive.css */
  --bar-h:64px;      /* sticky demo bar */
  --header-h:79px;   /* fixed site header (78px row + 1px border) */
  --pick-h:0px;      /* Basic's page-picker strip — 0 on every other tier */
  --maxw:1180px;

  /* ---- LITE (also the baseline): a simple single-page presence ---- */
  --radius:8px;
  --radius-sm:6px;
  --shadow:0 1px 6px rgba(15,31,38,.05);
  --shadow-lg:0 6px 18px rgba(15,31,38,.09);
  --lift:-1px;
  --dur:.2s;
  --ease:cubic-bezier(.4,0,.2,1);

  --h1:2.7rem;
  --h2:1.95rem;
  --display-weight:600;
  --display-track:0em;
  --eyebrow-rule:22px;
  --img-zoom:1.02;
  --reveal-shift:0px;   /* Lite fades in only — no travel */
  --reveal-scale:1;
  --reveal-dur:.45s;
  --reveal-stagger:.06s; /* gap between staggered children */
}

/* ---- BASIC (Core Website Plus): a complete business website ---- */
html[data-tier="basic"]{
  --radius:10px;
  --radius-sm:8px;
  --shadow:0 2px 10px rgba(15,31,38,.06);
  --shadow-lg:0 10px 26px rgba(15,31,38,.11);
  --lift:-2px;
  --dur:.25s;
  --pick-h:48px;        /* the page-picker strip only exists on Basic */

  --h1:3.1rem;
  --h2:2.15rem;
  --eyebrow-rule:26px;
  --img-zoom:1.03;
  --reveal-shift:14px;
  --reveal-scale:1;
  --reveal-dur:.6s;
  --reveal-stagger:.07s;
}

/* ---- PLUS: custom branding, modern UI, real motion ---- */
html[data-tier="plus"]{
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 8px 24px rgba(11,61,92,.10);
  --shadow-lg:0 20px 45px rgba(11,61,92,.16);
  --lift:-4px;
  --dur:.45s;
  --ease:cubic-bezier(.22,1,.36,1);

  --h1:3.4rem;
  --h2:2.3rem;
  --eyebrow-rule:34px;
  --img-zoom:1.07;
  /* Plus is where motion stops being polite — real travel and a scale-up, held
     long enough that you actually watch it arrive. */
  --reveal-shift:44px;
  --reveal-scale:.955;
  --reveal-dur:1.05s;
  --reveal-stagger:.1s;
}

/* ---- PREMIUM: cinematic, authored ---- */
html[data-tier="premium"]{
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(11,61,92,.14);
  --shadow-lg:0 30px 60px rgba(11,61,92,.22);
  --lift:-8px;
  --dur:.6s;
  --ease:cubic-bezier(.22,1,.36,1);

  /* deliberately NOT bigger than Plus — Premium reads as more refined through
     tracking and composition, not through a larger headline that crowds the
     featured portrait and switcher out of the hero */
  --h1:3.5rem;
  --h2:2.55rem;
  --display-track:-.015em;
  --eyebrow-rule:44px;
  --img-zoom:1.1;
  /* Premium goes further still: more travel, a longer settle, and a wider gap
     between staggered children so a grid arrives in sequence, not all at once. */
  --reveal-shift:64px;
  --reveal-scale:.92;
  --reveal-dur:1.35s;
  --reveal-stagger:.14s;
}