/* ============================================================
   DESIGN TOKENS — Brand Reference "Warm Editorial" (v2, 2026-07)
   Light. Poppins (headings) + Inter (body).
   Palette: #E9DDD2 cream · #A84F24 terracotta · #11131D charcoal ·
            #CFB8A7 beige · #9A7260 taupe
   Source of truth: abraham-otieno-brand-kit/abraham-otieno-brand-guide.html
   ============================================================ */

:root {
  /* ---------- Primitive: core palette ---------- */
  --cream: #E9DDD2;
  --terracotta: #A84F24;
  --terracotta-dark: #8A3D1A;
  --charcoal: #11131D;
  --beige: #CFB8A7;
  --taupe: #9A7260;

  /* ---------- Semantic: color ---------- */
  --bg: var(--cream);                 /* page background */
  --surface: #FFFFFF;                 /* card fill */
  --surface-2: var(--beige);          /* alt-section / stat / logo-bar fill */
  --ink: var(--charcoal);             /* primary text + headings — 13.87:1 on cream (AAA) */
  --ink-muted: #5C4742;               /* secondary text — taupe darkened for AA (6.5:1 on cream) */
  --ink-soft: var(--taupe);           /* tertiary text — large/bold contexts only (3.18:1) */
  --primary: var(--terracotta);       /* buttons, CTAs */
  --primary-hover: var(--terracotta-dark);
  --primary-soft: rgba(168, 79, 36, 0.12);
  --accent: var(--terracotta-dark);   /* text-sized accent — links, eyebrows, card-links (5.7:1 AA) */
  --accent-hover: var(--terracotta);  /* brightens toward pure terracotta on hover/active */
  --accent-soft: rgba(168, 79, 36, 0.12);
  --line: rgba(17, 19, 29, 0.14);     /* hairline border — charcoal-tinted per brand --line */
  --success: #2F6B34;
  --focus: var(--terracotta);
  --on-primary: #FFFFFF;              /* white text on terracotta buttons (5.51:1 AA) */

  /* Dark surfaces (footer, rhythm sections) — brand's own "Cream on Charcoal" pairing, 13.87:1 AAA */
  --dark-bg: var(--charcoal);
  --dark-ink: var(--cream);
  --dark-ink-muted: rgba(233, 221, 210, 0.62);
  --dark-line: rgba(233, 221, 210, 0.14);
  --accent-on-dark: #E0A987;  /* terracotta lightened for charcoal grounds — 8.98:1, per brand guide's own code-sample accent */

  /* ---------- Type ---------- */
  --font-heading: "Poppins", system-ui, sans-serif;                                        /* display / headings / wordmark */
  --font-body: "Inter", "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* body / UI */
  --font-label: var(--font-body);     /* uppercase tracked kickers/taglines — Inter, per brand specimen */

  /* Mobile-first sizes — overrides at breakpoints below */
  --fs-display: 2.5rem;     /* 40px */
  --fs-h1: 2rem;            /* 32px */
  --fs-h2: 1.5rem;          /* 24px */
  --fs-h3: 1.25rem;         /* 20px */
  --fs-body-lg: 1.125rem;   /* 18px */
  --fs-body: 1rem;          /* 16px */
  --fs-small: 0.875rem;     /* 14px */
  --fs-micro: 0.75rem;      /* 12px */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 700;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-label: 0.16em;  /* uppercase kicker/tagline tracking, per brand specimen (~0.18em) */

  /* ---------- Spacing (8pt scale) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-y: var(--space-8);
  --section-y-lg: var(--space-9);
  --container-max: 1200px;
  --container-pad: var(--space-5);

  /* ---------- Radius — component layer, brand: 14px card / 30px pill ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---------- Elevation — brand tokens: shadow-sm / shadow-md ---------- */
  --shadow-1: 0 2px 10px rgba(17, 19, 29, 0.06);
  --shadow-2: 0 10px 30px rgba(17, 19, 29, 0.10);
  --shadow-focus: 0 0 0 3px rgba(168, 79, 36, 0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 400ms;

  /* ---------- Layers ---------- */
  --z-header: 100;
  --z-fab: 200;
  --z-modal: 1000;

  color-scheme: light;
}

/* ============================================================
   TYPE SCALE — desktop overrides at 768px+
   ============================================================ */
@media (min-width: 768px) {
  :root {
    --fs-display: 4rem;       /* 64 */
    --fs-h1: 3rem;            /* 48 */
    --fs-h2: 2rem;            /* 32 */
    --fs-h3: 1.375rem;        /* 22 */
    --fs-body-lg: 1.1875rem;  /* 19 */
    --section-y: var(--section-y-lg);
    --container-pad: var(--space-7);
  }
}