/* ══════════════════════════════════════════════════════════════
   VELOCITY CABLING — DESIGN TOKENS
   Change a value here and it propagates across every page.
   Loaded before style.css.

   NOTE ON THE ORANGE. The reference theme puts white text on #FE590F,
   which measures 3.16:1 and fails WCAG AA. So the orange is split:
     --or       brand orange for shapes, icons, large numerals on dark
     --or-btn   anything carrying WHITE TEXT          (4.55:1 on white)
     --or-num   large numerals on light backgrounds   (3.81:1 on grey)
     --or-ink   orange as TEXT on light backgrounds   (5.21:1 on white)
   They read as the same colour side by side.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* ── accent ── */
  --or:#FE590F;
  --or-lt:#FE7536;
  --or-btn:#D64108;
  --or-btn-h:#B83505;
  --or-num:#E04609;
  --or-ink:#C2400A;
  --or-pale:#FFF1EA;

  /* ── ink ── */
  --ink:#282828;
  --body:#5A5A5A;
  --mute:#6E6E6E;
  --dark:#1E1E1E;
  --dark-2:#2A2A2A;

  /* ── surfaces ── */
  --white:#FFFFFF;
  --grey:#F5F5F5;
  --grey-2:#EDEDED;
  --line:#E4E4E4;

  /* ── status ── */
  --ok:#0C7A45;

  /* ── type ── */
  --head:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body-f:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ── geometry ── */
  --r:6px;
  --r-lg:10px;
  --r-pill:60px;
  --wrap:1220px;
  --gutter:30px;

  /* ── motion ── */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s;
  --t:.24s;

  /* ── elevation ── */
  --sh:0 2px 10px rgba(40,40,40,.06);
  --sh-md:0 12px 34px rgba(40,40,40,.10);
  --sh-lg:0 24px 60px rgba(40,40,40,.16);
  --sh-or:0 8px 22px rgba(254,89,15,.32);

  /* ── layout rhythm ── */
  --sec-y:100px;
  --sec-y-md:74px;
  --sec-y-sm:58px;
}