/* ==========================================================
   OLUWAFEMI EMMANUEL — DESIGN TOKENS
   Stage 01: Foundation. Do not replace in later stages.
   Editorial + Digital Studio + Technical Precision + Human Craft
   Rule: Never use pure black. Darkest tone is Deep Navy.
   ========================================================== */

:root {
  /* ---------- Color: surfaces ---------- */
  --color-ivory: #F5F1E8;
  --color-paper: #FCFBF8;
  --color-paper-warm: #F9F6EF;
  --color-navy: #172536;
  --color-navy-soft: #1F3348;
  --color-navy-ink: #24394F;
  --color-muted-blue: #526F94;
  --color-blue-gray: #AAB6C2;
  --color-terracotta: #C96F4A;
  --color-terracotta-deep: #A8552F;
  --color-terracotta-soft: #F3DDC9;

  /* Semantic surfaces */
  --surface-page: var(--color-paper);
  --surface-alt: var(--color-ivory);
  --surface-dark: var(--color-navy);
  --surface-dark-2: var(--color-navy-soft);

  /* Text */
  --text-primary: var(--color-navy);
  --text-secondary: #3D4F63;
  --text-muted: #5D6F83;
  --text-faint: #8A99AB;
  --text-on-dark: #F5F1E8;
  --text-on-dark-muted: #B9C4D1;
  --text-on-dark-faint: #8A9BB0;

  /* Lines / borders */
  --line-default: rgba(23, 37, 54, 0.14);
  --line-soft: rgba(23, 37, 54, 0.08);
  --line-strong: rgba(23, 37, 54, 0.24);
  --line-on-dark: rgba(245, 241, 232, 0.16);
  --line-on-dark-soft: rgba(245, 241, 232, 0.09);

  /* Accent usage: CTA, numbers, micro-details only */
  --accent: var(--color-terracotta);
  --accent-strong: var(--color-terracotta-deep);
  --accent-ink-on-light: #9A4E2A;

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale — editorial, not oversized */
  --fs-display-xl: clamp(2.6rem, 5.2vw + 1rem, 4.75rem);
  --fs-display-lg: clamp(2.1rem, 3.6vw + 1rem, 3.4rem);
  --fs-display-md: clamp(1.65rem, 2.4vw + 0.8rem, 2.4rem);
  --fs-display-sm: clamp(1.35rem, 1.6vw + 0.7rem, 1.75rem);
  --fs-lead: clamp(1.08rem, 0.5vw + 1rem, 1.28rem);
  --fs-body: 1rem;
  --fs-body-sm: 0.9375rem;
  --fs-caption: 0.85rem;
  --fs-mono: 0.76rem;
  --fs-mono-sm: 0.7rem;

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.65;
  --lh-tight: 1.35;

  --ls-display: -0.02em;
  --ls-body: -0.008em;
  --ls-mono: 0.08em;
  --ls-mono-tight: 0.04em;

  --weight-display: 480;
  --weight-display-em: 560;
  --weight-body: 400;
  --weight-body-med: 500;
  --weight-body-semi: 600;

  /* ---------- Spacing ---------- */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-128: 8rem;
  --space-160: 10rem;

  --section-pad: clamp(4.5rem, 8vw, 8.5rem);
  --section-pad-sm: clamp(3rem, 5vw, 5rem);
  --gutter: clamp(1.25rem, 3vw, 2.5rem);

  /* ---------- Layout ---------- */
  --container-sm: 46rem;
  --container-md: 70rem;
  --container-lg: 82rem;
  --container-xl: 88rem;
  --content-measure: 42rem;
  --grid-gap: clamp(1.25rem, 2.5vw, 2rem);

  /* ---------- Borders / Radius / Shadow ---------- */
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  /* Rule: cards only when sensible, mostly sharp / slight radius */
  --radius-card: var(--radius-md);
  --radius-btn: var(--radius-sm);

  --border-thin: 1px solid var(--line-default);
  --border-soft: 1px solid var(--line-soft);
  --border-strong: 1px solid var(--line-strong);
  --border-dark: 1px solid var(--line-on-dark);

  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(23, 37, 54, 0.06);
  --shadow-sm: 0 2px 10px rgba(23, 37, 54, 0.06), 0 1px 3px rgba(23, 37, 54, 0.08);
  --shadow-md: 0 12px 32px rgba(23, 37, 54, 0.1), 0 2px 8px rgba(23, 37, 54, 0.06);
  --shadow-lift: 0 18px 48px rgba(23, 37, 54, 0.13);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant: 120ms;
  --dur-fast: 200ms;
  --dur-med: 420ms;
  --dur-slow: 700ms;
  --reveal-distance: 18px;

  /* ---------- Breakpoints (for JS + docs) ---------- */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;

  /* Header */
  --header-h: 68px;
}

/* Dark section token overrides */
.section--dark,
.footer {
  --text-primary: var(--text-on-dark);
  --text-secondary: var(--text-on-dark-muted);
  --text-muted: var(--text-on-dark-faint);
  --line-default: var(--line-on-dark);
  --line-soft: var(--line-on-dark-soft);
}