/* ==========================================================================
   template-11 tokens. Rebrand a client here, and only here.
   Theme: <html data-theme="light"> or <html data-theme="dark">.
   ========================================================================== */

:root {
  /* Type. Pairing A (default): Marcellus + DM Sans.
     Pairing B: swap the Google Fonts link for Forum + Figtree and set
     --font-display: "Forum", ...; --font-body: "Figtree", ... */
  --font-display: "Marcellus", "Iowan Old Style", "Times New Roman", serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;

  /* 1.25 scale, fluid */
  --step--2: clamp(0.72rem, 0.7rem + 0.08vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.8vw, 1.85rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.7rem + 2.6vw, 3.8rem);
  --step-5: clamp(2.7rem, 1.8rem + 4.6vw, 6rem);
  /* the oversized statement size */
  --display: clamp(3.4rem, 11.5vw, 13.5rem);

  --track-caps: 0.14em;      /* small caps labels */
  --track-display: 0.02em;   /* big caps headings */
  --track-tight: -0.01em;    /* huge numerals */

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --s-10: 10rem;
  --s-11: 14rem;

  --container: 88rem;
  --container-narrow: 46rem;
  --gutter: clamp(1rem, 4.2vw, 4rem);
  --nav-h: 3.5rem;

  /* Shape: square photos and buttons, round only the nav pills */
  --r-pill: 999px;
  --r-card: 2px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.3, 1);
  --dur-1: 0.25s;
  --dur-2: 0.6s;
  --dur-3: 0.9s;
}

/* ---------- Light (warm) theme ---------- */
:root,
:root[data-theme="light"] {
  /* base ground */
  --base-bg: #f2ede3;
  --base-ink: #1c2723;
  --base-soft: #505b56;
  --base-line: rgba(28, 39, 35, 0.16);
  --base-accent: #1d6a64;

  /* alternate ground */
  --alt-bg: #e7e0d2;
  --alt-ink: #1c2723;
  --alt-soft: #4b5651;
  --alt-line: rgba(28, 39, 35, 0.18);
  --alt-accent: #1b625d;

  /* inverse ground (dark sections inside the light theme) */
  --inv-bg: #17211e;
  --inv-ink: #eee8dc;
  --inv-soft: #a9b3ad;
  --inv-line: rgba(238, 232, 220, 0.16);
  --inv-accent: #74c2b7;

  --card-bg: #faf7f1;
  --accent-fill: #1d6a64;    /* button background */
  --accent-fill-ink: #f7f3ea;
  --accent-fill-hover: #154f4b;
  --footer-bg: #101816;
  --scrim: 14, 20, 18;       /* rgb of photo scrims */
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"] {
  --base-bg: #131b19;
  --base-ink: #ece6da;
  --base-soft: #a3ada7;
  --base-line: rgba(236, 230, 218, 0.14);
  --base-accent: #6fbdb2;

  --alt-bg: #1a2421;
  --alt-ink: #ece6da;
  --alt-soft: #a7b1ab;
  --alt-line: rgba(236, 230, 218, 0.15);
  --alt-accent: #74c2b7;

  --inv-bg: #0d1311;
  --inv-ink: #ece6da;
  --inv-soft: #9ea8a2;
  --inv-line: rgba(236, 230, 218, 0.13);
  --inv-accent: #74c2b7;

  --card-bg: #212d29;
  --accent-fill: #6fbdb2;
  --accent-fill-ink: #0f1715;
  --accent-fill-hover: #8fd0c6;
  --footer-bg: #0a0f0e;
  --scrim: 8, 12, 11;
}