/* ============================================================
 * Grant Catalyst Africa — Design Tokens
 * ============================================================
 * One source of truth for colour, type, space, and motion.
 *
 * The visual language: tri-tonal navy/olive/gold on bone, drawn
 * from the logo. Disciplined like Ndebele block colour.
 * Restrained like Bauhaus. Patterned like Adinkra/Kente.
 * Editorial like a Sunday paper.
 *
 * Frontend lane only. Backend never reads this file.
 * Change history lives in HANDOFF_LOG.md.
 * ============================================================ */

:root {
  /* --------------------------------------------------------
   * BRAND PRIMITIVES
   * Locked from the logo. Do not introduce new hex values
   * outside this block — use the semantic aliases below.
   * -------------------------------------------------------- */
  --gca-navy:        #163E85;
  --gca-navy-deep:   #0E2A5E;
  --gca-navy-night:  #06122E;
  --gca-olive:       #3F9A2E;
  --gca-olive-deep:  #2E7D24;
  --gca-gold:        #D99708;
  --gca-gold-soft:   #F2C14E;
  --gca-bone:        #FAF8F3;
  --gca-bone-warm:   #F2EEE3;
  --gca-ink:         #111111;
  --gca-coral:       #E63946;
  --gca-slate:       #6C757D;

  /* --------------------------------------------------------
   * SEMANTIC SURFACES
   * Use these in components — never the primitives directly.
   * -------------------------------------------------------- */
  --surface-page:        var(--gca-bone);
  --surface-card:        #FFFFFF;
  --surface-warm:        var(--gca-bone-warm);
  --surface-inverse:     var(--gca-navy);
  --surface-deep:        var(--gca-navy-deep);
  --surface-night:       var(--gca-navy-night);

  --text-primary:          var(--gca-ink);
  --text-secondary:        var(--gca-slate);
  --text-muted:            rgba(17, 17, 17, 0.62);
  --text-on-dark:          var(--gca-bone);
  --text-on-dark-muted:    rgba(250, 248, 243, 0.72);
  --text-on-dark-faint:    rgba(250, 248, 243, 0.45);

  --accent-primary:        var(--gca-gold);
  --accent-primary-soft:   var(--gca-gold-soft);
  --accent-secondary:      var(--gca-olive);
  --accent-secondary-deep: var(--gca-olive-deep);
  --accent-alert:          var(--gca-coral);

  --rule-light:          rgba(17, 17, 17, 0.08);
  --rule-medium:         rgba(17, 17, 17, 0.16);
  --rule-on-dark:        rgba(250, 248, 243, 0.12);
  --rule-on-dark-strong: rgba(250, 248, 243, 0.24);

  /* --------------------------------------------------------
   * TYPOGRAPHY
   * Display: Space Grotesk — geometric, confident.
   * Editorial: Fraunces — warm serif, optical sizing.
   * Body: Inter — legibility everywhere.
   * Fluid clamp() so headlines scale 375px -> 1440px.
   * -------------------------------------------------------- */
  --font-display:    'Space Grotesk', system-ui, sans-serif;
  --font-editorial:  'Fraunces', Georgia, serif;
  --font-body:       'Inter', system-ui, sans-serif;

  --type-display-3xl: clamp(3rem, 5.5vw + 1rem, 6.5rem);    /* hero H1 */
  --type-display-2xl: clamp(2.25rem, 3.5vw + 1rem, 4.5rem); /* section H2 */
  --type-display-xl:  clamp(1.75rem, 2.2vw + 1rem, 3rem);   /* sub H3 */
  --type-display-lg:  clamp(1.5rem, 1.4vw + 1rem, 2rem);    /* card title */

  --type-lede:        clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --type-body:        1rem;
  --type-body-sm:     0.875rem;
  --type-caption:     0.75rem;

  --leading-display:        1.04;
  --leading-display-loose:  1.18;
  --leading-tight:          1.3;
  --leading-body:           1.6;
  --leading-loose:          1.8;

  --tracking-tight:    -0.025em;
  --tracking-display:  -0.015em;
  --tracking-body:     0;
  --tracking-caption:  0.06em;
  --tracking-eyebrow:  0.18em;

  /* --------------------------------------------------------
   * SPACING
   * 8-point grid. Use --space-N for predictable rhythm.
   * -------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  160px;
  --space-12:  200px;

  /* --------------------------------------------------------
   * RADIUS, BORDERS, ELEVATION
   * -------------------------------------------------------- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--rule-light);
  --border-medium:   1px solid var(--rule-medium);
  --border-on-dark:  1px solid var(--rule-on-dark);

  --shadow-soft:      0 8px 24px -8px rgba(14, 42, 94, 0.08);
  --shadow-lifted:    0 16px 40px -12px rgba(14, 42, 94, 0.16);
  --shadow-cinematic: 0 32px 64px -24px rgba(14, 42, 94, 0.32);
  --shadow-gold:      0 0 32px -4px rgba(217, 151, 8, 0.32);

  /* The brand ribbon: the logo's blue->gold->green growth gradient. */
  --gradient-brand-ribbon: linear-gradient(90deg,
    var(--gca-navy) 0%, #2563B0 22%, var(--gca-gold) 50%,
    #6FB23A 78%, var(--gca-olive-deep) 100%);

  /* --------------------------------------------------------
   * MOTION
   * One easing language. One duration scale.
   * Always honour prefers-reduced-motion (overrides below).
   * -------------------------------------------------------- */
  --ease-out-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out-snap: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-elegant:  cubic-bezier(0.6, 0.05, 0.4, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant:   120ms;
  --dur-quick:     220ms;
  --dur-default:   360ms;
  --dur-slow:      600ms;
  --dur-cinematic: 1200ms;
  --dur-cinema-xl: 1800ms;

  /* --------------------------------------------------------
   * LAYOUT RAILS
   * Keep content from sprawling on wide screens.
   * -------------------------------------------------------- */
  --rail-narrow:  640px;   /* article column width */
  --rail-prose:   720px;   /* long-form prose */
  --rail-content: 1120px;  /* standard sections */
  --rail-wide:    1280px;  /* hero + immersive */
  --rail-max:     1440px;  /* hard ceiling */

  --gutter-mobile:  24px;
  --gutter-tablet:  40px;
  --gutter-desktop: 56px;

  /* --------------------------------------------------------
   * Z-INDEX SCALE
   * -------------------------------------------------------- */
  --z-base:    1;
  --z-decor:   5;
  --z-content: 10;
  --z-nav:     50;
  --z-overlay: 80;
  --z-modal:   100;
  --z-toast:   120;
}

/* Strip motion for users who asked. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant:   0ms;
    --dur-quick:     0ms;
    --dur-default:   0ms;
    --dur-slow:      0ms;
    --dur-cinematic: 0ms;
    --dur-cinema-xl: 0ms;
  }
}

/* ============================================================
 * GLOBAL POLISH — loaded on every page, so it lifts the whole site.
 * (Design-audit punch-list, 2026-06-14: focus rings, base card
 *  elevation, selection colour, consistent reveal.)
 * ============================================================ */

/* Keyboard focus: a visible, on-brand ring on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* On-brand text selection. */
::selection { background: rgba(217, 151, 8, 0.22); color: var(--gca-ink); }

/* Cards read premium, not flat: a soft base elevation that deepens on hover.
 * Pages that define their own .card-hover:hover keep it (later inline <style>
 * wins); pages that don't now get a consistent lift. */
.card-hover { box-shadow: var(--shadow-soft); }
.card-hover:hover { box-shadow: var(--shadow-lifted); }

/* Tap targets: never smaller than the 44px accessibility floor. */
@media (max-width: 768px) {
  .mobile-bottom-nav a,
  nav a, .nav-link { min-height: 44px; }
}


/* ============================================================
 * LAUNCH SECTIONS — credibility stats, category chips, submit band.
 * Premium navy/gold, AA-safe, minimal (no textures).
 * ============================================================ */
.cred-band {
  background: linear-gradient(120deg, var(--gca-navy-deep) 0%, var(--gca-navy) 62%, #12336f 100%);
  border-top: 1px solid rgba(217,151,8,0.35);
  border-bottom: 1px solid rgba(217,151,8,0.35);
  padding: clamp(40px, 6vw, 72px) 0;
}
.cred-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 40px); }
@media (min-width: 900px) { .cred-grid { grid-template-columns: repeat(4, 1fr); } }
.cred-stat { text-align: center; }
.cred-stat-num {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-style: italic; font-variation-settings: "opsz" 144;
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1;
  color: var(--gca-gold-soft); letter-spacing: -0.01em;
}
.cred-stat-label { margin-top: 10px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(250,248,243,0.74); }
.cred-note { margin: clamp(28px,4vw,40px) auto 0; text-align: center; font-size: 0.9rem; color: rgba(250,248,243,0.6); max-width: 640px; line-height: 1.6; }

.track-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(40px,5vw,56px); }
.track-chip {
  display: inline-flex; align-items: center; position: relative;
  padding: 10px 20px 10px 26px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(22,62,133,0.14);
  color: var(--gca-navy); font-weight: 600; font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(17,17,17,0.04);
}
.track-chip::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 999px; background: var(--gca-gold); }

.audience-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .audience-grid { grid-template-columns: repeat(4, 1fr); } }
.audience-card {
  background: #fff; border: 1px solid rgba(22,62,133,0.10); border-top: 3px solid var(--gca-gold);
  border-radius: 16px; padding: 28px; box-shadow: 0 8px 24px -12px rgba(14,42,94,0.10);
}
.audience-card h3 { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--gca-ink); font-size: 1.05rem; margin-bottom: 8px; }
.audience-card p { color: var(--gca-slate); font-size: 0.9rem; line-height: 1.6; }

.submit-band { background: linear-gradient(135deg, var(--gca-navy) 0%, var(--gca-navy-deep) 68%, var(--gca-navy-night) 100%); padding: clamp(56px, 8vw, 112px) 0; }
.submit-inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .submit-inner { grid-template-columns: 1.1fr 0.9fr; gap: 64px; } }
.submit-points { display: grid; gap: 20px; }
.submit-point { display: flex; gap: 14px; align-items: flex-start; }
.submit-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--gca-gold); margin-top: 6px; box-shadow: 0 0 0 4px rgba(217,151,8,0.15); }
.submit-point-t { color: var(--gca-bone); font-weight: 600; margin-bottom: 2px; }
.submit-point-d { color: rgba(250,248,243,0.66); font-size: 0.9rem; line-height: 1.55; }


/* ---- Launch sections: font match to site + de-monotony animation ---- */
/* Match the site's editorial stat numerals (italic Fraunces, optical size). */
.cred-stat-num { font-style: italic; font-variation-settings: "opsz" 144; letter-spacing: -0.01em; }
.audience-card h3 { letter-spacing: -0.02em; }

/* Staggered scroll reveal so the new sections animate in like the rest. */
.cred-stat.reveal, .track-chip.reveal, .audience-card.reveal { transition: opacity .6s ease, transform .6s ease; }
.cred-stat.reveal:nth-child(2){ transition-delay:.08s } .cred-stat.reveal:nth-child(3){ transition-delay:.16s } .cred-stat.reveal:nth-child(4){ transition-delay:.24s }
.audience-card.reveal:nth-child(2){ transition-delay:.10s } .audience-card.reveal:nth-child(3){ transition-delay:.20s } .audience-card.reveal:nth-child(4){ transition-delay:.30s }
.track-chip.reveal:nth-child(2){transition-delay:.04s}
.track-chip.reveal:nth-child(3){transition-delay:.08s}
.track-chip.reveal:nth-child(4){transition-delay:.12s}
.track-chip.reveal:nth-child(5){transition-delay:.16s}
.track-chip.reveal:nth-child(6){transition-delay:.20s}
.track-chip.reveal:nth-child(7){transition-delay:.24s}
.track-chip.reveal:nth-child(8){transition-delay:.28s}
.track-chip.reveal:nth-child(9){transition-delay:.32s}

/* Hub strips: CSS-only scroll reveal, default VISIBLE (no JS dependency,
   no invisible-text risk on pages without a reveal observer). */
@keyframes gcaStripUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .strip-reveal { animation: gcaStripUp linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cred-stat.reveal, .track-chip.reveal, .audience-card.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
 * PREMIUM POLISH — approved design pass (editorial accents,
 * light-based depth, gold motion). Restraint over decoration;
 * AA-safe; NO textures. Applies site-wide via existing classes.
 * ============================================================ */

/* 1. Editorial serif accent on the emphasized span of a headline —
 *    sans headline + Fraunces-italic emphasis (premium magazine feel). */
h1 span.text-navy, h1 span.text-gradient,
h2 span.text-navy, h2 span.text-gradient,
.headline-accent {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* 2. Gold glow + subtle lift on primary gold CTAs. */
a.bg-gold, button.bg-gold, .btn-gold {
  transition: box-shadow .3s ease, transform .25s ease, background-color .2s ease;
}
a.bg-gold:hover, button.bg-gold:hover, .btn-gold:hover {
  box-shadow: var(--shadow-gold);
  transform: translateY(-1px);
}

/* 3. Consistent, light-based card lift everywhere (depth from light,
 *    never texture). */
.card-hover { transition: box-shadow .35s ease, transform .35s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lifted); }

/* 4. Gold underline that draws under section eyebrows on scroll
 *    (CSS-only; defaults VISIBLE so it never hides text). */
.eyebrow-accent { position: relative; display: inline-block; padding-bottom: 8px; }
.eyebrow-accent::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 42px;
  background: linear-gradient(90deg, var(--gca-gold), var(--gca-gold-soft));
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .eyebrow-accent::after {
      transform: scaleX(0);
      animation: gcaDrawLine linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 22%;
    }
  }
}
@keyframes gcaDrawLine { to { transform: scaleX(1); } }


/* ============================================================
 * OPPORTUNITY CARD SYSTEM — type-coloured accent, verified badge,
 * employer initial avatar. Colour-coded, scannable, zero texture.
 * grant=gold  scholarship=soft-gold  fellowship=blue  job=olive
 * tender=navy  prize/challenge=coral  default=navy
 * ============================================================ */
.opp-card { position: relative; overflow: hidden; --opp-accent: var(--gca-navy); }
.opp-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--opp-accent);
  transition: width .25s var(--ease-out-soft);
}
.opp-card:hover::before { width: 6px; }
.opp-card[data-type="grant"]        { --opp-accent: var(--gca-gold); }
.opp-card[data-type="scholarship"]  { --opp-accent: var(--gca-gold-soft); }
.opp-card[data-type="fellowship"]   { --opp-accent: #2563B0; }
.opp-card[data-type="job"]          { --opp-accent: var(--gca-olive); }
.opp-card[data-type="tender"],
.opp-card[data-type="rfp"]          { --opp-accent: var(--gca-navy); }
.opp-card[data-type="prize"],
.opp-card[data-type="challenge"]    { --opp-accent: var(--gca-coral); }

.verified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--gca-olive-deep);
}
.verified-badge::before {
  content: ''; width: 13px; height: 13px; border-radius: 999px; flex: none;
  background: var(--gca-olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF8F3' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E") center / 8px no-repeat;
}

.opp-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--opp-accent) 14%, #fff);
  color: var(--gca-navy-deep);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--opp-accent) 30%, transparent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .opp-avatar { background: rgba(22, 62, 133, 0.08); border-color: rgba(22, 62, 133, 0.2); }
}


/* Fine-line Africa motif for hub heroes — thin gold stroke, whisper-quiet. */
.hub-africa {
  position: absolute; top: 50%; right: -6%; transform: translateY(-50%);
  width: clamp(280px, 38vw, 520px); aspect-ratio: 1;
  color: var(--gca-gold); opacity: 0.07; pointer-events: none;
}
.hub-africa svg { width: 100%; height: 100%; }
@media (max-width: 768px) { .hub-africa { right: -30%; opacity: 0.05; } }