/* ===========================================================================
   EXPERIENCE IT — BRAND TOKENS
   Single source of truth. Every page on this site imports this and uses the
   variables; nothing hard-codes a hex value or a font stack.

   Load order:   brand.css  ->  page/section styles
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ---- brand ---------------------------------------------------------- */
  --red:      #FF1E3C;   /* primary. Actions, emphasis, the "IT" in the wordmark */
  --red-d:    #B3001C;   /* pressed / gradient partner */
  --cyan:     #00E5FF;   /* secondary. Live state, hover, "it's working" */
  --green:    #25D366;   /* WhatsApp only — never repurpose */
  --ok:       #3DDC84;   /* status: healthy */
  --bad:      #FF3B30;   /* status: problem */

  /* ---- dark ground (site chrome, heroes) ------------------------------- */
  --void:     #04060A;
  --void-2:   #0B0E14;
  --glass:    rgba(255,255,255,.035);
  --line:     rgba(255,255,255,.09);
  --line-2:   rgba(255,255,255,.16);
  --ink:      #E9EFF7;
  --ink-2:    #94A3B5;
  --ink-3:    #5A6675;

  /* ---- light ground (documents, guides — read at length and printed) --- */
  --paper:    #FAFAFB;
  --card:     #FFFFFF;
  --paper-ln: #E6E8EC;
  --paper-ink:#0B0E14;
  --paper-2:  #454F5B;
  --paper-3:  #7C8894;

  /* ---- type ------------------------------------------------------------ */
  --d: 'Chakra Petch', system-ui, sans-serif;   /* display: headings, wordmark, buttons */
  --b: 'Barlow', system-ui, sans-serif;          /* body */
  --m: 'JetBrains Mono', monospace;              /* data, labels, eyebrows, code */

  /* ---- motion ---------------------------------------------------------- */
  --ease:   cubic-bezier(.2,.8,.25,1);
  --fast:   .22s;
  --normal: .32s;
  --slow:   .75s;

  /* ---- shape ----------------------------------------------------------- */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --pill: 100px;
  --wrap: 1280px;
  --wrap-wide: 1400px;
}

/* Motion is decoration. Anyone who asks for less gets none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}