/* =====================================================================
   Dr Malusi Gigaba — Colors & Type
   Source: Vision 2055 Brand Blueprint v0.3, Section 4.1
   "A scholar-statesman who transforms ideas into action."
   ===================================================================== */

/* ---------- Web fonts (Google Fonts CDN) ----------
   Type system honours the wordmark's six characteristics:
     • Serifs (anchored terminals)        → Lora + Cormorant
     • High contrast thick/thin strokes   → Cormorant Garamond, Cinzel
     • Vertical stress, classical proportions → Cormorant, Cinzel
     • CAPITAL LETTERING (MG, DR MALUSI GIGABA) → Cinzel (Trajan-style monumental caps)
     • Balanced spacing, symmetrical kerning → tracking-wider on Cinzel/Cormorant
     • Gold rendering on navy field        → see .wordmark / --bg-crest tokens
   Source Sans 3 carries body/UI; Lora carries long-form prose & headlines. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Cormorant+Garamond:wght@400;500;600;700&family=Cinzel:wght@400;500;600;700&display=swap');

:root {
  /* =====================================================================
     COLOR — Brand
     The two primary colors carry the philosophy:
       Navy  = stability, discipline, institutional maturity
       Gold  = achievement, intellect, timelessness
     ===================================================================== */

  /* Primary */
  --navy-900: #060f1c;     /* deepest — wordmark crest backgrounds, footers */
  --navy-800: #0b1f3a;     /* PRIMARY DEEP NAVY (spec) */
  --navy-700: #112a4c;
  --navy-600: #1a3a66;
  --navy-500: #2a5288;     /* link / interactive accent on light bg */
  --navy-400: #5b7aa8;
  --navy-300: #95abc8;
  --navy-200: #c5d0e0;
  --navy-100: #e3e9f1;
  --navy-050: #f3f5f9;     /* page-tint, subtle section bg */

  --gold-900: #6f5816;
  --gold-800: #8e6f1d;
  --gold-700: #a98629;
  --gold-600: #c7a441;     /* PRIMARY GOLD (spec) */
  --gold-500: #d3b55c;
  --gold-400: #e0c986;
  --gold-300: #ecdcad;
  --gold-200: #f4ead0;
  --gold-100: #faf4e6;
  --gold-050: #fdfaf2;

  --teal-700: #0f5d61;
  --teal-600: #1b7f83;     /* TEAL ACCENT (spec) — sparingly, for data/highlights */
  --teal-500: #3a9a9e;
  --teal-300: #8fc4c6;
  --teal-100: #d8ebec;

  /* Neutrals — warm, paper-leaning to match documentary photography */
  --ink-1000: #0a0a0a;     /* near-black, body text on light */
  --ink-900:  #1a1a1a;
  --ink-800:  #2b2b2b;
  --ink-700:  #424242;     /* secondary body */
  --ink-600:  #5a5a5a;     /* meta */
  --ink-500:  #7a7a7a;     /* muted */
  --ink-400:  #a0a0a0;
  --ink-300:  #c8c8c8;
  --ink-200:  #dcdcdc;
  --ink-150:  #e5e5e5;     /* WARM GREY (spec) — divider / surface */
  --ink-100:  #ededed;
  --ink-050:  #f5f5f3;     /* paper */
  --ink-025:  #fbfaf6;     /* warm paper */
  --paper:    #faf8f2;     /* warm cream — primary light surface */
  --white:    #ffffff;

  /* Semantic — proof / governance signals (Brand Integrity Dashboard) */
  --signal-green:  #2e7d4f;   /* "Green" engagement, verified */
  --signal-amber:  #b78410;   /* "Amber" — proceed with care */
  --signal-red:    #a8322e;   /* "Red" — do not engage */
  --signal-info:   var(--teal-600);

  /* =====================================================================
     COLOR — Semantic tokens
     ===================================================================== */
  --bg-page:        var(--paper);
  --bg-surface:     var(--white);
  --bg-raised:      #ffffff;
  --bg-sunken:      var(--ink-025);
  --bg-tint:        var(--navy-050);
  --bg-inverse:     var(--navy-800);
  --bg-crest:       var(--navy-900);     /* deepest navy used for wordmark crest */
  --bg-overlay:     rgba(11, 31, 58, 0.72);

  --fg-1:           var(--ink-1000);     /* primary body */
  --fg-2:           var(--ink-700);      /* secondary */
  --fg-3:           var(--ink-500);      /* muted / meta */
  --fg-4:           var(--ink-400);      /* placeholder */
  --fg-on-navy:     #f4ead0;             /* warm cream on navy — not pure white */
  --fg-on-navy-2:   #c5d0e0;
  --fg-on-gold:     var(--navy-900);
  --fg-link:        var(--navy-700);
  --fg-link-hover:  var(--gold-700);
  --fg-accent:      var(--gold-700);

  --border-hairline: rgba(11, 31, 58, 0.10);
  --border-soft:     var(--ink-150);
  --border-strong:   var(--ink-300);
  --border-rule:     var(--navy-800);     /* editorial hairline rule */
  --border-gold:     var(--gold-600);
  --divider:         var(--ink-150);

  /* =====================================================================
     TYPE — Families
     Lora        = body serif (set in long-form essays and quotes)
     Source Sans = sans interface, captions, UI
     Cormorant   = wordmark/crest display serif (Trajan/Garamond stand-in)
     ===================================================================== */
  --font-serif:    'Lora', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:     'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display:  'Cormorant Garamond', 'Lora', Georgia, serif;
  --font-monument: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Weights */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Type scale — editorial, slow ramp.
     Designed for reading body at 18–19px with generous leading. */
  --text-xs:    12px;   /* meta, captions */
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;   /* body default */
  --text-lg:    21px;   /* lede */
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   62px;
  --text-6xl:   80px;   /* hero / crest */

  /* Line heights — tight on display, generous on body */
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
  --lh-prose:   1.7;    /* long-form essays */

  /* Letter spacing — quiet, with all-caps eyebrow opening up */
  --tracking-tight:  -0.015em;   /* large display */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;    /* small caps, eyebrows */
  --tracking-wider:   0.18em;    /* SECTION EYEBROWS, wordmark spacing */

  /* =====================================================================
     SPACING — Editorial 4-pt scale
     ===================================================================== */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* Layout */
  --measure-prose: 68ch;          /* essay column */
  --measure-narrow: 52ch;
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1180px;
  --container-xl: 1320px;

  /* =====================================================================
     RADII — Restrained. Round-frame logo is the only fully circular form.
     ===================================================================== */
  --r-0:  0;
  --r-1:  2px;     /* inputs, hairline cards */
  --r-2:  4px;     /* buttons, tags */
  --r-3:  8px;     /* surfaces */
  --r-4:  12px;    /* feature cards */
  --r-pill: 999px; /* pill-shaped tags only */
  --r-circle: 50%;

  /* =====================================================================
     SHADOWS — Quiet. Editorial. Never glassy or glowy.
     ===================================================================== */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(11, 31, 58, 0.06);
  --shadow-2: 0 2px 6px rgba(11, 31, 58, 0.08), 0 1px 2px rgba(11, 31, 58, 0.04);
  --shadow-3: 0 8px 24px rgba(11, 31, 58, 0.10), 0 2px 6px rgba(11, 31, 58, 0.05);
  --shadow-4: 0 18px 40px rgba(11, 31, 58, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);
  --ring-focus: 0 0 0 3px rgba(199, 164, 65, 0.45); /* gold focus ring */

  /* =====================================================================
     MOTION — Composed, never bouncy. Reflects "restraint, no theatre."
     ===================================================================== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0.05, 0, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  /* =====================================================================
     LAYOUT GUTTER — horizontal page padding used across all pages
     ===================================================================== */
  --page-gutter: 56px;
}

/* =====================================================================
   SEMANTIC TYPE — apply directly to elements; or compose via classes.
   ===================================================================== */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-page);
  font-feature-settings: 'liga', 'kern';
}

/* Display / hero — wordmark + section openers */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* H1 — page title (essay or section) */
h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

/* H2 — section */
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

/* H3 — sub-section */
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* H4 — body subhead */
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* H5 — eyebrow / caps */
h5, .h5, .eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-xs);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-accent);
}

/* Body */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.prose {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--fg-1);
  max-width: var(--measure-prose);
}
.prose p + p { margin-top: var(--sp-5); }
.prose p { text-wrap: pretty; }

/* Lede — first paragraph of an essay */
.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

/* Pull-quote — used in Leadership Reflections */
blockquote, .pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-medium);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 2px solid var(--gold-600);
  padding-left: var(--sp-6);
  margin: var(--sp-8) 0;
}
blockquote cite, .pullquote .attrib {
  display: block;
  margin-top: var(--sp-3);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Caption / meta */
.caption, figcaption, small {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

/* Code / data — used sparingly in Reform Ledger tables */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-1);
  padding: 0.05em 0.35em;
}

/* Links */
a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-color: rgba(11, 31, 58, 0.25);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-2) var(--ease-standard),
              text-decoration-color var(--dur-2) var(--ease-standard);
}
a:hover {
  color: var(--fg-link-hover);
  text-decoration-color: var(--gold-600);
}
a:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: 2px;
}

/* Editorial rule */
hr, .rule {
  border: 0;
  border-top: 1px solid var(--border-rule);
  margin: var(--sp-10) 0;
}
.rule-gold {
  border: 0;
  border-top: 1px solid var(--gold-600);
  width: 64px;
  margin: var(--sp-6) 0;
}

/* Wordmark — the crest treatment.
   Cinzel renders the all-caps "DR MALUSI GIGABA" / "MG" inscription;
   gold-on-navy enforces the scholar (gold) + statesman (navy) pairing. */
.wordmark {
  font-family: var(--font-monument);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-600);
}

/* Monumental caps — section openers, civic-inscription style.
   Use sparingly: brief, all-caps phrases like "REFORM LEDGER" or "EVIDENCE HUB". */
.monument {
  font-family: var(--font-monument);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.monument--gold-on-navy {
  background: var(--bg-crest);
  color: var(--gold-600);
  padding: var(--sp-4) var(--sp-6);
  display: inline-block;
}

/* Selection */
::selection {
  background: var(--gold-300);
  color: var(--navy-900);
}