/* Modern Era Brands: tokens. The single source of truth; components consume semantics only. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var-v1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primitives */
  --ink: #0b0b0c;
  --ink-2: #131315;
  --ink-line: #232327;
  --ink-line-strong: #3a3a40;
  --paper: #ffffff;
  --paper-2: #f4f4f2;
  --paper-line: #e2e2df;
  --paper-line-strong: #c4c4c0;
  --silver: #c9c9ce;      /* accent on ink: 12.0:1 */
  --graphite: #4a4a50;    /* accent on paper: 8.9:1 */
  --mute-on-ink: #9a9aa0; /* 6.9:1 on ink */
  --mute-on-paper: #5f5f66; /* 6.4:1 on paper */

  /* semantics (ink is the default ground) */
  --bg: var(--ink);
  --bg-2: var(--ink-2);
  --fg: var(--paper);
  --muted: var(--mute-on-ink);
  --line: var(--ink-line);
  --line-strong: var(--ink-line-strong);
  --accent: var(--silver);
  --focus: var(--paper);

  /* type */
  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-kicker: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lede: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  --fs-h1: clamp(2.75rem, 1.6rem + 5.2vw, 6.5rem);
  --track-kicker: 0.28em;
  --lh-tight: 1.02;
  --lh-body: 1.6;

  /* 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: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-pad: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --wrap: 78rem;
  --measure: 38rem;

  /* shape + motion */
  --radius-1: 2px; --radius-2: 6px; --radius-pill: 999px;
  --dur-1: 140ms; --dur-2: 260ms; --dur-3: 600ms; --dur-4: 1400ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-io: cubic-bezier(0.83, 0, 0.17, 1);

  /* layers */
  --z-header: 40; --z-overlay: 60; --z-skip: 80;
}

[data-theme="paper"] {
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --fg: var(--ink);
  --muted: var(--mute-on-paper);
  --line: var(--paper-line);
  --line-strong: var(--paper-line-strong);
  --accent: var(--graphite);
  --focus: var(--ink);
}