/* ===========================================================================
   COLORS — the entire chromatic vocabulary
   One signal color (Electric Blue), one ink, gray surface bands.
   =========================================================================== */
:root {
  /* --- Brand & Accent ------------------------------------------------------ */
  --color-primary: #024ad8;        /* lone CTA fill, link, chevron, active nav */
  --color-primary-bright: #296ef9; /* lighter blue used INSIDE dark slabs      */
  --color-primary-deep: #0e3191;   /* pressed CTA, visited link                */
  --color-primary-soft: #c9e0fc;   /* pale surface: story cards, chips         */
  --color-on-primary: #ffffff;     /* text on filled blue / ink CTAs           */

  /* --- Surface ------------------------------------------------------------- */
  --color-canvas: #ffffff;         /* universal page background                */
  --color-paper: #ffffff;          /* card surface (lift via border/shadow)    */
  --color-cloud: #f7f7f7;          /* lightest gray alternating band           */
  --color-fog: #e8e8e8;            /* darker gray band (FAQ outer, header strip)*/
  --color-steel: #c2c2c2;          /* hairline on emphasized outlined elements */
  --color-hairline: #e8e8e8;       /* default 1px border                       */

  /* Sale / lifestyle accents (scarce) */
  --color-bloom-coral: #ff5050;    /* sale-tag chip                            */
  --color-bloom-rose: #f9d4d2;     /* soft pink lifestyle accent               */

  /* Printer-plan / infographic teal-storm tones */
  --color-storm-mist: #8ebdce;
  --color-storm-sea: #7fadbe;
  --color-storm-deep: #356373;     /* also a neutral status accent             */

  /* --- Text ---------------------------------------------------------------- */
  --color-ink: #1a1a1a;            /* universal text on white                  */
  --color-ink-deep: #000000;       /* wordmark, hairline strokes               */
  --color-ink-soft: #292929;       /* textural shift inside dark slabs         */
  --color-on-ink: #ffffff;         /* text on dark-navy slabs                  */
  --color-charcoal: #3d3d3d;       /* secondary body, disclaimers              */
  --color-graphite: #636363;       /* legal lines, timestamp metadata          */

  /* --- Semantic ------------------------------------------------------------ */
  --color-error: #b3262b;          /* bloom-deep: error / discount emphasis    */
  --color-error-strong: #5a1313;   /* bloom-wine                               */
  --color-bloom-deep: #b3262b;
  --color-bloom-wine: #5a1313;
  --color-status-neutral: #356373; /* storm-deep as status accent              */

  /* --- Elevation (shadow tokens live here for convenience) ---------------- */
  --shadow-soft-lift: 0 2px 8px rgba(26, 26, 26, 0.08);
  --shadow-modal: 0 8px 24px rgba(26, 26, 26, 0.12);
}