/* ===========================================================================
   Commander Payments — design tokens.

   Concept: THE LIVE TRANSACTION. The site is lit like a payment terminal at
   night — deep navy glass, the Verifone dot-matrix glowing in Commander blue,
   approvals landing on the C18. Colour is spent on one thing: the brand blue
   #0884AB and the cyan light it throws.

   The brand blue itself measures 4.29:1 against white — fine for large type,
   just short for a 15px button label. Buttons therefore sit on --cp-blue-btn
   (#077DA3, 4.7:1), which reads as the same blue; #0884AB stays the colour of
   glows, rules, icons and display type.
   =========================================================================== */

:root{
  /* brand */
  --cp-blue:#0884AB;
  --cp-blue-btn:#077DA3;
  --cp-blue-600:#066E90;
  --cp-blue-700:#055B77;
  --cp-blue-300:#56BEDF;
  --cp-blue-200:#A4DCEE;
  --cp-blue-50:#EAF6FB;
  --glow:#3CCBF4;
  --glow-2:#8FE6FF;

  /* night */
  --navy-950:#020B11;
  --navy-900:#04131C;
  --navy-850:#061A26;
  --navy-800:#09212F;
  --navy-700:#0E2D3E;
  --navy-600:#15405A;

  /* day */
  --ink:#0A1A24;
  --ink-2:#2D4250;
  --muted:#53697A;
  --line:#DCE6EC;
  --line-2:#ECF2F5;
  --paper:#F3F7FA;
  --white:#FFFFFF;

  /* text on night */
  --fg-d:#EEF7FB;
  --fg-d2:#B7CDD8;
  --fg-d3:#8CA7B5;
  --line-d:rgba(150,205,232,.14);
  --glass-d:rgba(14,45,62,.55);

  /* status */
  --ok:#1FBF8A;
  --ok-ink:#0B7A57;
  --warn:#F0B13B;
  --warn-ink:#8A5A00;
  --bad:#E5484D;

  /* type */
  --font-display:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero:clamp(2.55rem, 1.15rem + 4.4vw, 5.25rem);
  --fs-h1-sub:clamp(2.3rem, 1.3rem + 3.2vw, 4.2rem);
  --fs-h2:clamp(1.95rem, 1.2rem + 2.3vw, 3.3rem);
  --fs-h3:clamp(1.12rem, 1rem + .35vw, 1.35rem);
  --fs-lede:clamp(1.05rem, .97rem + .32vw, 1.26rem);
  --fs-body:1.0625rem;
  --fs-small:.9rem;
  --fs-meta:.75rem;
  --lh-display:1.04;
  --lh-head:1.1;
  --lh-body:1.68;

  /* space */
  --container:1240px;
  --gutter:clamp(18px, 3.6vw, 40px);
  --section-y:clamp(76px, 8.4vw, 136px);
  --cmdr-gap:clamp(18px, 2vw, 28px);
  --header-h:76px;
  --header-top:14px;

  /* shape */
  --r-xs:8px;
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-xl:34px;
  --pill:999px;

  --shadow-1:0 1px 2px rgba(10,26,36,.05), 0 10px 28px -12px rgba(10,26,36,.12);
  --shadow-2:0 30px 70px -28px rgba(4,30,46,.42);
  --shadow-glow:0 18px 50px -16px rgba(8,132,171,.65);

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* the Verifone dot matrix as a CSS pattern — the canvas paints over it when
     JS is live, and it is all the editor and no-JS visitors ever need */
  --dots-d:radial-gradient(circle at 1px 1px, rgba(120,205,240,.16) 1px, transparent 1.4px);
  --dots-l:radial-gradient(circle at 1px 1px, rgba(8,132,171,.16) 1px, transparent 1.4px);
  --dots-size:22px 22px;
}