/* =========================================================
   VYPA design tokens — shared with the VYPA mobile app.
   Loaded first on every page; every other stylesheet reads
   brand colour from here instead of hard-coding hex values.
   ========================================================= */
:root {
  /* Brand blue */
  --vypa-blue: #0042FF;          /* hero / primary brand colour */
  --vypa-blue-rgb: 0 66 255;     /* for rgb(var(--vypa-blue-rgb) / a) tints */
  --vypa-blue-700: #0033CC;      /* raised surfaces and hover on blue */
  --vypa-blue-soft: #44AAFF;     /* blue text that must stay legible on dark */
  --vypa-blue-pale: #8CABFF;     /* pale blue labels on dark */

  /* Accents (see accent.css for where they are allowed) */
  --lemon: #B6F23A;              /* primary action + money / benefit */
  --lemon-hover: #A9E22F;        /* lemon darkened ~6% */
  --lemon-ink: #2B3A0A;          /* secondary text on lemon */
  --lemon-tint: #E7FFC2;         /* soft lemon background (chips, success) */
  --sun: #FFD23F;                /* attention / callout, sparingly */
  --ink: #0B0F1A;                /* text on lemon, sun and white */

  /* Shape */
  --radius-pill: 999px;
  --radius-card: 18px;
  --radius-callout: 16px;
  --focus-ring: 0 0 0 3px rgb(255 255 255 / 0.6);
  --focus-ring-light: 0 0 0 3px rgb(var(--vypa-blue-rgb) / 0.45);
}