/* ==========================================================================
   Design tokens — Muiz Oniyide Portfolio
   Palette is drawn from the print studio: uncoated paper, ink, and a single
   "proof" accent used the way a printer uses spot colour — sparingly.
   ========================================================================== */

:root {
  /* ---- Colour: light (paper) ---- */
  --paper: #ECEEE7;
  --paper-alt: #E2E4DA;
  --paper-raised: #F5F6F1;
  --ink: #14161C;
  --ink-soft: #4A4D46;
  --muted: #83867A;
  --line: rgba(20, 22, 28, 0.13);
  --line-strong: rgba(20, 22, 28, 0.28);
  --accent: #FF4B1F;
  --accent-ink: #ffffff;
  --accent-2: #2B57FF;
  --shadow: rgba(20, 22, 28, 0.10);

  /* ---- Type ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-hero: clamp(2.75rem, 7vw, 6.2rem);
  --fs-h1: clamp(2.1rem, 4.4vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.3rem);
  --fs-h3: clamp(1.15rem, 1.8vw, 1.45rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* ---- Space ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;

  --container: 1200px;
  --container-narrow: 780px;

  /* ---- Shape / motion ---- */
  --radius-sm: 3px;
  --radius-md: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  color-scheme: light;
}

/* ---- Dark mode ---- */
:root[data-theme="dark"] {
  --paper: #101114;
  --paper-alt: #17181C;
  --paper-raised: #1B1D22;
  --ink: #ECEEE7;
  --ink-soft: #B7B9AF;
  --muted: #7D8074;
  --line: rgba(236, 238, 231, 0.14);
  --line-strong: rgba(236, 238, 231, 0.30);
  --accent: #FF5A33;
  --accent-ink: #101114;
  --accent-2: #6B8AFF;
  --shadow: rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}