/* ============================================================
   WÁSIU — Colors & Type Foundation
   London × African-inspired streetwear. Dark-mode first.
   Fully rounded. Emerald + warm sand/clay over near-black.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Brand palette (raw) ---------------------------------- */
  --emerald-900: #173A2A;
  --emerald-700: #2C5240;
  --emerald-500: #3C6650;
  --emerald-300: #6E9079;

  --black:       #000000;
  --ink-950:     #0A0A0A;
  --ink-900:     #141311;
  --ink-850:     #1E1D1B;
  --ink-700:     #2A2825;

  --clay-600:    #6B6056;
  --sand-400:    #C8B99A;
  --sand-200:    #E8D5B0;
  --cream-50:    #F7F3EB;

  --accent-teal: #6FC6D0;
  --accent-pink: #E8A6BC;

  /* ---- Semantic tokens : DARK (default) --------------------- */
  --bg:          var(--ink-950);
  --bg-elevated: var(--ink-900);
  --surface:     var(--ink-850);
  --surface-2:   var(--ink-700);

  --fg:          var(--cream-50);
  --fg-muted:    #A89C8A;
  --fg-subtle:   var(--clay-600);
  --fg-onbrand:  var(--cream-50);

  --primary:       var(--emerald-500);
  --primary-deep:  var(--emerald-700);
  --primary-hover: var(--emerald-300);

  --border:        rgba(247, 243, 235, 0.10);
  --border-strong: rgba(247, 243, 235, 0.20);
  --overlay:       rgba(10, 10, 10, 0.72);
  --focus-ring:    var(--emerald-300);

  /* ---- Radii ------------------------------------------------ */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   26px;
  --r-xl:   36px;
  --r-2xl:  52px;
  --r-pill: 999px;

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

  /* ---- Elevation ------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 24px 64px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(110,144,121,0.22), 0 12px 40px rgba(44,82,64,0.30);

  /* ---- Type families ---------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Type scale ------------------------------------------ */
  --t-display: clamp(3.5rem, 9vw, 8rem);
  --t-h1:      clamp(2.5rem, 5vw, 4.25rem);
  --t-h2:      clamp(2rem, 3.5vw, 3rem);
  --t-h3:      1.5rem;
  --t-h4:      1.25rem;
  --t-body-lg: 1.125rem;
  --t-body:    1rem;
  --t-sm:      0.875rem;
  --t-label:   0.75rem;

  --lh-tight: 0.96;
  --lh-snug:  1.12;
  --lh-body:  1.6;

  --ls-tight: -0.03em;
  --ls-label:  0.18em;
}

/* ---- Light surface override (rare — for cream sections) ----- */
.on-cream {
  --bg:          var(--cream-50);
  --bg-elevated: #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #EFE8DA;
  --fg:          var(--ink-950);
  --fg-muted:    #5C5346;
  --fg-subtle:   var(--clay-600);
  --primary:     var(--emerald-700);
  --primary-hover: var(--emerald-500);
  --border:        rgba(10,10,10,0.10);
  --border-strong: rgba(10,10,10,0.18);
}

/* ============================================================
   Base element reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-h4); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--emerald-500); color: var(--cream-50); }

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sand-400);
}

.lede { font-size: var(--t-body-lg); color: var(--fg-muted); }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.9em; }