/* ==========================================================================
   Safe Mothers Initiative (SMI) Sierra Leone
   Design tokens v1.0

   Colour values sampled directly from the supplied logo artwork by hue
   clustering (144,975 non-white pixels), then normalised into a usable
   scale. Every value below carries its measured WCAG 2.x contrast ratio
   so no one has to guess whether a pairing is legal.

   Rule of thumb enforced here: the bright logo green is a DECORATIVE
   colour only. At 2.46:1 on white it fails text contrast badly. Text and
   solid buttons use the darkened green ramp instead.
   ========================================================================== */

:root {
  /* --- Brand: navy (the wordmark) -------------------------------------- */
  /* Sampled core #08248A, normalised to a cleaner, slightly deeper anchor */
  --smi-navy-900: #061845;   /* 17.2:1 on white */
  --smi-navy-800: #0A2472;   /* 13.9:1 on white  <- primary brand ink */
  --smi-navy-700: #12318F;   /* 10.4:1 on white */
  --smi-navy-100: #DCE3F5;   /* tint for surfaces */
  --smi-navy-050: #F0F3FC;

  /* --- Brand: blue (the crescent) -------------------------------------- */
  /* Sampled #0D6DDD .. #0080FF; the crescent is a gradient in the artwork */
  --smi-blue-700: #0B57B0;   /*  6.3:1 on white : safe for body links     */
  --smi-blue-600: #0E76E8;   /*  4.4:1 on white : large text / UI only    */
  --smi-blue-500: #0080FF;   /*  3.8:1 on white : DECORATIVE / borders    */
  --smi-blue-100: #D6E9FF;

  /* --- Brand: green (the leaf and hand) -------------------------------- */
  /* Sampled #50BC1A. Beautiful, and unusable for text. Ramp added. */
  --smi-green-800: #2F6D0C;  /*  6.3:1 on white : button fill, white text */
  --smi-green-700: #3D8B0F;  /*  4.3:1 on white : large text only         */
  --smi-green-500: #50BC1A;  /*  2.5:1 : DECORATIVE ONLY. Never on text.  */
  --smi-green-100: #DDF3CE;
  --smi-green-050: #F1FAE9;

  /* --- Neutrals --------------------------------------------------------- */
  /* Paper is tinted from the navy, not warmed. Keeps the brand cool and
     avoids the generic cream-and-terracotta look. */
  --smi-paper:     #F6F8FC;
  --smi-white:     #FFFFFF;
  --smi-ink:       #101828;  /* 17.8:1 : body copy                        */
  --smi-ink-muted: #4A5568;  /*  7.9:1 : secondary copy                   */
  --smi-hairline:  #D9E0EE;

  /* --- Status ----------------------------------------------------------- */
  /* Reserved for the "is the helpline open right now" indicator and for
     form validation. Deliberately outside the brand ramp so it never
     reads as decoration. */
  --smi-open:      #1B7F3B;
  --smi-closed:    #8A5A00;
  --smi-error:     #A81E1E;

  /* --- Focus ring ------------------------------------------------------- */
  /* WCAG 2.2 adds Focus Appearance (2.4.11/2.4.13). 3px, 2px offset, and
     a contrasting outer ring so it survives on both navy and paper. */
  --smi-focus:      var(--smi-blue-600);
  --smi-focus-halo: var(--smi-white);

  /* --- Type ------------------------------------------------------------- */
  /* Display face is subset to headings only (roughly 40 glyphs) to keep the
     font payload viable on a 2G connection. Body uses the system stack and
     downloads nothing at all. */
  --smi-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --smi-font-body: system-ui, -apple-system, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  --smi-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale, 320px to 1280px viewport */
  --smi-text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --smi-text-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --smi-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --smi-text-lg:   clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --smi-text-xl:   clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --smi-text-2xl:  clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --smi-text-3xl:  clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);

  --smi-leading-tight: 1.15;
  --smi-leading-body:  1.65;   /* generous: much of the audience reads
                                  English as a second language */
  --smi-measure: 68ch;

  /* --- Space (4px base) -------------------------------------------------- */
  --smi-space-1: 0.25rem;
  --smi-space-2: 0.5rem;
  --smi-space-3: 0.75rem;
  --smi-space-4: 1rem;
  --smi-space-6: 1.5rem;
  --smi-space-8: 2rem;
  --smi-space-12: 3rem;
  --smi-space-16: 4rem;
  --smi-space-24: 6rem;

  /* --- Shape ------------------------------------------------------------- */
  --smi-radius-sm: 4px;
  --smi-radius-md: 8px;
  --smi-radius-lg: 14px;
  --smi-radius-pill: 999px;

  /* --- Elevation --------------------------------------------------------- */
  /* Tinted with the navy rather than pure black, so shadows sit in the
     brand rather than muddying it. */
  --smi-shadow-sm: 0 1px 2px rgba(6, 24, 69, 0.08);
  --smi-shadow-md: 0 4px 14px rgba(6, 24, 69, 0.10);
  --smi-shadow-lg: 0 12px 32px rgba(6, 24, 69, 0.14);

  /* --- Layout ------------------------------------------------------------ */
  --smi-container: 1180px;
  --smi-gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Motion ------------------------------------------------------------ */
  --smi-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --smi-dur-fast: 120ms;
  --smi-dur: 220ms;
}

/* Approved semantic pairings. Use these, not the raw ramp. */
:root {
  --smi-bg:            var(--smi-paper);
  --smi-bg-elevated:   var(--smi-white);
  --smi-bg-inverse:    var(--smi-navy-800);

  --smi-text:          var(--smi-ink);
  --smi-text-muted:    var(--smi-ink-muted);
  --smi-text-inverse:  var(--smi-white);
  --smi-link:          var(--smi-blue-700);

  /* Get Help is the highest-contrast action on every page, by design. */
  --smi-action-help-bg:   var(--smi-navy-800);
  --smi-action-help-text: var(--smi-white);

  /* Donate is the growth action. */
  --smi-action-give-bg:   var(--smi-green-800);
  --smi-action-give-text: var(--smi-white);

  /* Everything else is secondary and outlined, never a third fill colour. */
  --smi-action-quiet-border: var(--smi-navy-800);
  --smi-action-quiet-text:   var(--smi-navy-800);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --smi-dur-fast: 0.01ms;
    --smi-dur: 0.01ms;
  }
}

/* Forced-colours mode: strip brand fills, let the OS palette win.
   Required for WCAG 2.2 non-text contrast in high-contrast Windows. */
@media (forced-colors: active) {
  :root {
    --smi-shadow-sm: none;
    --smi-shadow-md: none;
    --smi-shadow-lg: none;
  }
}

/* --------------------------------------------------------------------------
   Baseline primitives
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--smi-bg);
  color: var(--smi-text);
  font-family: var(--smi-font-body);
  font-size: var(--smi-text-base);
  line-height: var(--smi-leading-body);
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--smi-font-display);
  font-weight: 600;
  line-height: var(--smi-leading-tight);
  letter-spacing: -0.015em;
  color: var(--smi-navy-800);
  text-wrap: balance;
  margin: 0 0 var(--smi-space-4);
}

p { max-width: var(--smi-measure); text-wrap: pretty; }

a { color: var(--smi-link); text-underline-offset: 0.18em; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--smi-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--smi-focus-halo);
  border-radius: var(--smi-radius-sm);
}

/* WCAG 2.2 Target Size (Minimum), 2.5.8 : 24px floor, 44px in practice. */
:where(a, button, [role="button"], input[type="checkbox"], input[type="radio"]) {
  min-block-size: 44px;
  min-inline-size: 44px;
}
:where(p, li) a { min-block-size: auto; min-inline-size: auto; }

img, video { max-width: 100%; height: auto; }

.smi-container {
  inline-size: min(100% - (var(--smi-gutter) * 2), var(--smi-container));
  margin-inline: auto;
}

.smi-skip-link {
  position: absolute;
  inset-inline-start: var(--smi-space-4);
  inset-block-start: -100%;
  z-index: 999;
  padding: var(--smi-space-3) var(--smi-space-4);
  background: var(--smi-navy-800);
  color: var(--smi-white);
  border-radius: 0 0 var(--smi-radius-md) var(--smi-radius-md);
}
.smi-skip-link:focus { inset-block-start: 0; }

.smi-visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}