/* Cairo Hospice: UI color and type tokens.
   Colors are sampled from the new logo (brand/logo-redraw/vector.svg). Neutrals
   and the soft accents are carried over from the current site's Elementor
   global palette. See brand/brandboard/index.html for the visual board. */
:root {
  /* Brand: from the logo */
  --cairo-midnight:   #001E4B; /* darkest shade of the crescent: footer, dark sections */
  --cairo-navy:       #03275A; /* CAIRO wordmark: primary brand color, headings, primary buttons */
  --cairo-royal:      #0566BF; /* crescent body: links, focus rings, active states */
  --cairo-sky:        #2E83D8; /* crescent highlight: hover, icons, illustration */
  --cairo-light-blue: #86BEF0; /* crescent sheen: accents on dark backgrounds */
  --cairo-mist:       #E9F3FF; /* palest crescent tint: section and card backgrounds */
  --cairo-gold:       #F8C168; /* cross highlight: decorative rules, badges, accents on navy */
  --cairo-deep-gold:  #B4780C; /* cross shadow: gold for text or icons on light backgrounds */
  --cairo-cream:      #FEECC8; /* palest gold: callouts and highlight panels */

  /* Supporting: from the current site's palette */
  --cairo-sage:       #9FBBB7; /* current secondary: calm accent, dividers */
  --cairo-sage-light: #BACECB;
  --cairo-rose:       #DCAEAF; /* current soft accent: grief and bereavement content */
  --cairo-blush:      #F2ECEE;
  --cairo-linen:      #F6F3EF; /* current warm page background */

  /* Neutrals */
  --cairo-charcoal:   #454545; /* current body-text color */
  --cairo-slate:      #6B7280;
  --cairo-line:       #D9DEE5;
  --cairo-white:      #FFFFFF;

  /* Semantic roles */
  --color-bg:            var(--cairo-white);
  --color-bg-soft:       var(--cairo-mist);
  --color-bg-warm:       var(--cairo-linen);
  --color-bg-inverse:    var(--cairo-midnight);
  --color-text:          var(--cairo-charcoal);
  --color-heading:       var(--cairo-navy);
  --color-text-inverse:  var(--cairo-white);
  --color-link:          var(--cairo-royal);
  --color-link-hover:    var(--cairo-navy);
  --color-accent:        var(--cairo-gold);
  --color-border:        var(--cairo-line);
  --color-focus:         var(--cairo-royal);

  --btn-primary-bg:      var(--cairo-navy);
  --btn-primary-bg-hover:var(--cairo-royal);
  --btn-primary-text:    var(--cairo-white);
  --btn-accent-bg:       var(--cairo-gold);
  --btn-accent-text:     var(--cairo-midnight);

  /* Type */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body:    "Montserrat", -apple-system, "Segoe UI", Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(3,39,90,.06), 0 8px 24px rgba(3,39,90,.08);
}