/* ============================================================
   FORMA — Brand customization layer
   Every brand-critical value lives here. Edit this file to
   rebrand the template; you should not need to touch index.html.
   ============================================================ */
:root{
  /* ---- Core palette ---- */
  --ink:#0D0D10;        /* page background (near-black)          */
  --ink-2:#141419;      /* raised surface / alternating sections */
  --ink-3:#1C1C23;      /* cards, borders, hairlines             */
  --red:#FF2D2D;        /* primary accent: CTAs, kickers, focus  */
  --red-dark:#D91F1F;   /* accent hover / pressed state          */
  --ink-on-red:rgba(13,13,16,.88); /* small dark text on --red (4.77:1) */
  --gray:#8A8A93;       /* muted body copy                       */
  --gray-light:#C4C4CC; /* secondary copy on dark                */
  --white:#FFFFFF;      /* primary text on dark                  */

  /* ---- Typography ---- */
  --display:'Bebas Neue',Impact,sans-serif;                        /* headings, numerals */
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;      /* body, UI, labels   */

  /* ---- Layout ---- */
  --diag:clamp(2.5rem,6vw,5.5rem);      /* diagonal section-edge depth */
  --pad-x:clamp(1.25rem,5vw,4.5rem);    /* global horizontal gutter    */
}