/* ============================================================
   GRAIL ZIMBABWE — Colors & Type foundations
   ------------------------------------------------------------
   Brand: The Grail (Zimbabwe) — a spiritually inspired women's
   movement guided by Ubuntu. Identity is built on the "Grail"
   chalice mark: two flowing curves rising from a single point,
   rendered in an orchid→lavender gradient, with a soft rounded
   wordmark in deep Grail purple.

   FONT SUBSTITUTION NOTE (please confirm / replace):
   The Grail logotype uses a custom soft-rounded face. The closest
   freely-available matches are loaded here:
     • Quicksand  -> brand display / wordmark feel
     • Mulish     -> body & UI (warm humanist sans)
     • Lora       -> scripture, quotes & reflective text (serif)
   Swap these for the licensed brand fonts when available.

   LIVE SITE NOTE: thegrail.org runs on the Divi (WordPress) theme, whose
   default body face is Open Sans — the international site uses a plain humanist
   sans for running text, with the rounded "Grail" logotype as its only bespoke
   type. Mulish is a warmer sibling of Open Sans; set --font-sans to
   'Open Sans' to match the international site exactly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* ---------- BRAND PURPLE SCALE (the chalice) ---------- */
  --grail-plum-900:   #4E2150;  /* deepest – reserved, headings on light */
  --grail-plum-800:   #5E2D5E;
  --grail-purple-700: #7A2E7A;  /* deep – tagline ink */
  --grail-purple-600: #8E3A8E;
  --grail-purple-500: #9B4A9B;  /* PRIMARY – the "Grail" wordmark */
  --grail-orchid-400: #AE63AE;
  --grail-orchid-300: #BE84C0;  /* gradient mid */
  --grail-lavender-300: #CBA3CE;
  --grail-lavender-200: #DEC6E0;
  --grail-lavender-100: #EFE3F0;
  --grail-lavender-50:  #F8F2F9; /* tinted paper */

  /* Signature chalice gradient (light rising) */
  --grad-chalice: linear-gradient(160deg, #CBA3CE 0%, #AE63AE 45%, #7A2E7A 100%);
  --grad-rise:    linear-gradient(180deg, #9B4A9B 0%, #BE84C0 100%);
  --grad-dawn:    linear-gradient(135deg, #7A2E7A 0%, #AE63AE 55%, #D9A441 130%);

  /* ---------- SECONDARY ACCENTS (movement themes) ----------
     Derived, not in the logo — used sparingly:
       gold  = "living miracles that light the world"
       leaf  = environmental justice / sustainability       */
  --grail-gold:      #D9A441;
  --grail-gold-soft: #F0D79B;
  --grail-leaf:      #5E8C5A;
  --grail-leaf-soft: #CBDDC6;

  /* ---------- NEUTRALS (warm, purple-tinted) ---------- */
  --ink-900: #2A222C;  /* primary text */
  --ink-700: #4A414C;
  --ink-500: #6E6470;  /* secondary text */
  --ink-400: #8E8690;  /* muted / captions */
  --ink-300: #B8B2BA;  /* disabled */
  --line:    #E8DFEA;  /* hairline borders */
  --line-strong: #D8CCDB;
  --paper:   #FFFFFF;
  --paper-2: #FAF6FB;  /* lavender-tinted surface */
  --paper-3: #F3EBF4;

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-500);
  --fg-3: var(--ink-400);
  --fg-on-dark: #F8F2F9;
  --fg-on-dark-2: #DEC6E0;
  --brand: var(--grail-purple-500);
  --brand-strong: var(--grail-purple-700);
  --bg-1: var(--paper);
  --bg-2: var(--paper-2);
  --bg-brand: var(--grail-plum-900);
  --accent: var(--grail-gold);
  --focus-ring: #BE84C0;

  /* status (kept within the warm family) */
  --ok:   #5E8C5A;
  --warn: #C98A2B;
  --err:  #B23A48;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Quicksand', 'Trebuchet MS', sans-serif; /* rounded brand voice */
  --font-sans:    'Mulish', 'Segoe UI', system-ui, sans-serif;
  --font-serif:   'Lora', Georgia, 'Times New Roman', serif; /* scripture / reflective */

  /* ---------- TYPE SCALE (fluid) ---------- */
  --text-xs:   0.78rem;   /* 12.5px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --text-3xl:  clamp(2.6rem, 1.6rem + 4.4vw, 4.25rem);
  --text-hero: clamp(3.2rem, 1.8rem + 6.4vw, 6rem);

  /* weights */
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-x: 800;

  /* line-heights */
  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.62;

  /* tracking */
  --track-tight: -0.02em;
  --track-eyebrow: 0.18em;

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;
  --r-petal: 24px 24px 24px 4px; /* soft "petal" corner motif */

  /* ---------- SPACING (4-base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---------- ELEVATION (soft, lavender-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(78,33,80,.06), 0 1px 3px rgba(78,33,80,.05);
  --shadow-md: 0 4px 14px rgba(78,33,80,.08), 0 2px 6px rgba(78,33,80,.05);
  --shadow-lg: 0 18px 48px rgba(78,33,80,.14), 0 6px 16px rgba(78,33,80,.08);
  --shadow-glow: 0 10px 40px rgba(155,74,155,.28);

  /* ---------- MOTION ---------- */
  --ease-soft: cubic-bezier(.22,.61,.36,1);   /* gentle settle */
  --ease-rise: cubic-bezier(.16,.84,.44,1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;
}

/* ============================================================
   SEMANTIC TYPE — apply directly or copy into component CSS
   ============================================================ */
.h-hero {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}
.lead {
  font-family: var(--font-sans);
  font-weight: var(--w-reg);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.p {
  font-family: var(--font-sans);
  font-weight: var(--w-reg);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--fg-3);
}
/* Reflective / scripture voice */
.scripture {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-med);
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--brand-strong);
}
.quote-cite {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}