/* ============================================================
   Full Circle Africa — Design Tokens
   The site is dark-first. Navy is canvas, white is ink,
   teal is pulse. Four colours, sharp corners, generous space.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=Urbanist:wght@300;400;600&display=swap');

:root {
  /* ---------- Brand colours (non-negotiable, from the logo) ---------- */
  --navy:        #0F165A;
  --teal:        #00BCBC;
  --white:   #FFFFFF;
  --mid-grey:    #C4C8D0;

  /* ---------- Semantic foreground / background on dark canvas ---------- */
  --bg:          var(--navy);
  --bg-inverse:  var(--white);
  --fg:          var(--white);
  --fg-muted:    var(--mid-grey);
  --fg-faint:    rgba(255, 255, 255, 0.45);
  --accent:      var(--teal);

  /* Inverted (rare light-mode interlude — e.g. founder section) */
  --fg-on-light:        var(--navy);
  --fg-muted-on-light:  #5A5F6E;

  /* Hairlines, dividers */
  --rule:                rgba(255, 255, 255, 0.12);
  --rule-strong:         rgba(255, 255, 255, 0.24);
  --rule-on-light:       rgba(15, 22, 90, 0.14);
  --hover-warm:          rgba(255, 255, 255, 0.04);

  /* ---------- Elevation — depth comes from LIGHT, never a second blue ----------
     One navy field everywhere. Surfaces lift with a faint white film + a soft
     teal-tinted glow shadow (reads as brand atmosphere, not a drop shadow). */
  --surface:        rgba(255, 255, 255, 0.025);
  --surface-hover:  rgba(255, 255, 255, 0.05);
  --shadow-lift:    0 8px 40px rgba(0, 188, 188, 0.06);
  --glow-teal:      radial-gradient(60% 80% at 100% 0%, rgba(0,188,188,0.05) 0%, rgba(0,188,188,0) 70%);

  /* ---------- Type families ----------
     Display / editorial — Playfair Display, 400 + 400 italic only.
     Sans / body / UI — Urbanist, weights 300 / 400 / 600 only.
     Hard rule: weight 500 is never used. Urbanist is never heavier
     than 400 except .t-body-strong (600). */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  --font-sans:  "Urbanist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Weight tokens — the only sans weights this system uses. */
  --w-body:    400;   /* body, lead, lead-airy, button-large — lifted from 300 for legibility on dark */
  --w-ui:      400;   /* tagline, nav-link, button-utility */
  --w-strong:  600;   /* body-strong only */
  --w-serif:   400;   /* Playfair Display, including italic */

  /* ---------- Type scale ----------
     Named tokens map 1:1 to the .t-* semantic classes below. */
  --fs-hero-display:    80px;
  --fs-display-lg:      48px;
  --fs-display-md:      36px;
  --fs-lead:            28px;
  --fs-lead-airy:       24px;
  --fs-body:            17px;
  --fs-tagline:         14px;
  --fs-button-large:    16px;
  --fs-button-utility:  13px;
  --fs-nav:             12px;

  /* Legacy aliases used by older preview cards — point at the new scale. */
  --fs-display:    var(--fs-hero-display);
  --fs-h1:         var(--fs-display-lg);
  --fs-h2:         var(--fs-display-md);
  --fs-h3:         var(--fs-lead);
  --fs-lede:       var(--fs-lead-airy);
  --fs-body-sm:    var(--fs-tagline);
  --fs-meta:       var(--fs-tagline);
  --fs-label:      var(--fs-nav);

  --lh-display:    1.03;
  --lh-heading:    1.08;
  --lh-body:       1.47;
  --lh-tight:      1.24;

  --tracking-display: -0.3px;
  --tracking-heading: -0.2px;
  --tracking-body:    -0.374px;
  --tracking-label:   -0.12px;

  /* ---------- Spacing (8px 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;
  --s-11:160px;

  --gutter-page:   clamp(24px, 6vw, 96px);
  --max-content:   1320px;
  --max-prose:     640px;

  /* ---------- Radius — sharp by default, soft where it reads better ---------- */
  --radius-0:    0px;       /* default — most surfaces */
  --radius-sm:   4px;       /* inputs, small chips */
  --radius-md:  10px;       /* buttons, tile blocks, image crops */
  --radius-pill: 999px;     /* avatars, the logo mark */

  /* ---------- Motion ---------- */
  --ease:           cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:       200ms;
  --dur-base:       300ms;
  --dur-reveal:     700ms;
}

/* ============================================================
   Semantic type classes — the source of truth.
   Reach for these via className="t-..." rather than hand-rolling
   font-size / weight combinations in components.
   ============================================================ */

.t-hero-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 80px;
  line-height: 1.03;
  letter-spacing: -0.3px;
  color: var(--fg);
}

.t-display-lg {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -0.2px;
  color: var(--fg);
}

.t-display-md {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -0.15px;
  color: var(--fg);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.14;
  letter-spacing: 0.2px;
  color: var(--fg);
}

.t-lead-airy {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--fg);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--fg);
}

.t-body-strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.24;
  letter-spacing: -0.374px;
  color: var(--fg);
}

.t-tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: -0.224px;
  color: var(--fg-muted);
}

.t-nav-link {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.0;
  letter-spacing: -0.12px;
  color: var(--fg);
  text-decoration: none;
}

.t-button-large {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: 0;
}

.t-button-utility {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.0;
  letter-spacing: -0.15px;
}

/* Italic emphasis inside Playfair headings */
.t-italic { font-style: italic; }

/* Tabular numerals (for the proof strip) */
.t-num {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Link defaults ---------- */
.fc-link {
  color: var(--fg);
  text-decoration: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.fc-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease);
}
.fc-link:hover { color: var(--teal); }
.fc-link:hover::after { transform: scaleX(1); }

/* ---------- Page reset to brand canvas ---------- */
.fc-canvas {
  background: var(--navy);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}