/* ============================================================
   BloodBank.software — global design tokens
   Loaded site-wide by functions.php. Declares variables only and
   styles nothing, so it is safe everywhere — Divi modules can use
   var(--blood) etc. in their own Custom CSS boxes.
   ============================================================ */

:root {
  /* --- Colour: lifted from the live site's Tailwind config --- */
  --blood:      #C0392B;   /* primary accent                      */
  --blood-dk:   #922B21;   /* hover, deep bands                   */
  --ink:        #1A1A1A;   /* text, dark sections                 */
  --mist:       #F7F5F2;   /* page ground                         */
  --stone:      #8C8C8C;   /* brand grey — decorative use only    */
  --rule:       #E0DBD5;   /* hairlines                           */
  --surface:    #FFFFFF;   /* cards                               */

  /* Darker grey for running text. #8C8C8C on #F7F5F2 is only 3.1:1,
     which fails WCAG AA at body sizes, so secondary copy uses this
     (6:1) and --stone is kept for decorative marks. */
  --stone-dk:   #5F5F5F;

  /* on dark sections */
  --ink-text:   #F7F5F2;
  --ink-muted:  #A8A29B;
  --ink-rule:   rgba(247, 245, 242, .16);

  /* --- Aliases kept so section stylesheets read in plain English --- */
  --paper:        var(--mist);
  --line:         var(--rule);
  --steel:        var(--stone-dk);
  --crimson:      var(--blood);
  --crimson-deep: var(--blood-dk);
  --chill:        var(--ink);      /* developer track reads as ink, not a new hue */

  /* --- Type: DM Serif Display + DM Sans + DM Mono --- */
  --display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --body:    "DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Space --- */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --band:   clamp(4rem, 9vw, 7.5rem);
  --max:    1220px;

  --radius: 8px;                    /* matches the site's rounded-lg */
  --shadow: 0 1px 2px rgba(26, 26, 26, .04), 0 14px 34px rgba(26, 26, 26, .07);
}