/* ============================================================
   NGO Lamu & Uganda — Design Tokens
   Colors + Typography foundations
   "Conectamos comunidades, impulsamos futuros."
   ============================================================ */

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

:root {
  /* ---- Brand palette (raw) ---- */
  --indigo:        #0D3A5C;  /* Azul Índigo   — primary, authority, trust */
  --indigo-700:    #0A2F4A;  /* pressed / deep */
  --indigo-300:    #6E91A9;  /* muted indigo on cream */
  --turquoise:     #3FA6B6;  /* Turquesa Costera — secondary, coastal */
  --turquoise-700: #2F8794;  /* pressed */
  --turquoise-100: #DCEEF1;  /* tint fill */
  --wood:          #6B5B4C;  /* Madera Grisácea — warm neutral, earth */
  --wood-300:      #A99C8E;  /* muted */
  --coral:         #E4755A;  /* Coral Suave — accent, calls to action, warmth */
  --coral-700:     #C95B40;  /* pressed */
  --coral-100:     #F8E1D9;  /* tint fill */
  --white:         #FFFFFF;  /* Blanco Puro */

  /* ---- Paper / surfaces ---- */
  --paper:         #F8F0E2;  /* warm cream — default canvas */
  --paper-2:       #FBF6EE;  /* lighter cream — raised surface */
  --paper-line:    #E7DCC9;  /* hairline on cream */
  --ink-line:      rgba(13,58,92,0.12); /* indigo hairline */

  /* ---- Semantic foreground ---- */
  --fg1:           #1C2A33;  /* primary text — near-ink, slightly warm */
  --fg2:           #4A5560;  /* secondary text */
  --fg3:           #8A8478;  /* tertiary / captions on cream */
  --fg-on-dark:    #F4ECDD;  /* text on indigo/turquoise */
  --fg-on-dark-2:  rgba(244,236,221,0.72);

  /* ---- Semantic roles ---- */
  --bg:            var(--paper);
  --surface:       var(--white);
  --primary:       var(--indigo);
  --secondary:     var(--turquoise);
  --accent:        var(--coral);
  --link:          var(--coral-700);
  --focus-ring:    rgba(63,166,182,0.55);

  /* ---- Type families ---- */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type scale (Swiss, generous) ---- */
  --step--1: 0.833rem;   /* 13.3px — caption / label */
  --step-0:  1rem;       /* 16px   — body */
  --step-1:  1.25rem;    /* 20px   — lead */
  --step-2:  1.602rem;   /* 25.6px — h4 */
  --step-3:  2.0rem;     /* 32px   — h3 */
  --step-4:  2.566rem;   /* 41px   — h2 */
  --step-5:  3.5rem;     /* 56px   — h1 */
  --step-6:  5rem;       /* 80px   — display */

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

  /* ---- Tracking ---- */
  --track-eyebrow: 0.18em;   /* uppercase labels (PROPÓSITO, PALETA…) */
  --track-tight:  -0.02em;   /* large display headings */
  --track-normal: 0;

  /* ---- Line heights ---- */
  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.6;

  /* ---- Spacing scale (8px base) ---- */
  --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;

  /* ---- Radii (restrained / squarer) ---- */
  --r-none: 0px;
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;

  /* ---- Borders ---- */
  --border-hair: 1px solid var(--paper-line);
  --border-ink:  1px solid var(--ink-line);

  /* ---- Shadows (soft, low, warm) ---- */
  --shadow-sm: 0 1px 2px rgba(43,32,20,0.06);
  --shadow-md: 0 6px 20px -8px rgba(43,32,20,0.18);
  --shadow-lg: 0 24px 60px -24px rgba(13,58,92,0.28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-text: 64ch;
  --gutter: clamp(20px, 5vw, 80px);
}

/* ============================================================
   Semantic element styles — opt in with .ds-prose or use vars
   ============================================================ */
.ds-type { font-family: var(--font-sans); color: var(--fg1); }

.eyebrow {
  font-size: var(--step--1);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}

.display {
  font-size: var(--step-6);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}
h1, .h1 {
  font-size: var(--step-5);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}
h2, .h2 {
  font-size: var(--step-4);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg1);
}
h3, .h3 {
  font-size: var(--step-3);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
h4, .h4 {
  font-size: var(--step-2);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
.lead {
  font-size: var(--step-1);
  font-weight: var(--w-regular);
  line-height: 1.45;
  color: var(--fg2);
}
p, .body {
  font-size: var(--step-0);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--fg2);
}
.caption {
  font-size: var(--step--1);
  font-weight: var(--w-regular);
  line-height: 1.4;
  color: var(--fg3);
}

/* Coral period — the brand's signature full-stop accent */
.accent-dot { color: var(--coral); }

::selection { background: var(--turquoise-100); color: var(--indigo); }