/* trycorollary.com — shared tokens and components.
   Fonts: WOFF2 subsets (Latin, punctuation, arrows, math operators) made with pyftsubset.
   Tokens mirror Packages/CorollaryKit/Sources/CorollaryDesign (Palette, Spacing, Radius, Motion). */

@font-face { font-family: "Serif Display"; src: url(fonts/SourceSerif4Display-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Serif Display"; src: url(fonts/SourceSerif4Display-It.woff2) format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Serif"; src: url(fonts/SourceSerif4-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Serif"; src: url(fonts/SourceSerif4-It.woff2) format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Serif"; src: url(fonts/SourceSerif4-Semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sans"; src: url(fonts/Inter-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sans"; src: url(fonts/Inter-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
/* Metric-matched fallbacks, so the swap from Georgia/Arial to the web fonts doesn't move the layout. */
@font-face { font-family: "Serif Display Fallback"; src: local("Georgia"); size-adjust: 91.31%; ascent-override: 113.46%; descent-override: 36.69%; line-gap-override: 0%; }
@font-face { font-family: "Serif Fallback"; src: local("Georgia"); size-adjust: 100%; ascent-override: 103.59%; descent-override: 33.5%; line-gap-override: 0%; }
@font-face { font-family: "Sans Fallback"; src: local("Arial"); size-adjust: 106.86%; ascent-override: 90.66%; descent-override: 22.57%; line-gap-override: 0%; }
@font-face { font-family: "Mono"; src: url(fonts/IBMPlexMono-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ivory: #FAF8F3;
  --wash: #F1ECE4;
  --carbon: #111111;
  --graphite: #6B6B6B;
  --oxide: #8A2F2A;
  --rule: rgb(17 17 17 / 0.14);
  --rule-strong: rgb(17 17 17 / 0.32);
  --ink: #1B1C22;

  --serif-display: "Serif Display", "Serif Display Fallback", Georgia, serif;
  --serif: "Serif", "Serif Fallback", Georgia, serif;
  --sans: "Sans", "Sans Fallback", -apple-system, system-ui, sans-serif;
  --mono: "Mono", ui-monospace, Menlo, monospace;

  --t-quick: 180ms; --t-std: 220ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-io: cubic-bezier(.45, 0, .2, 1);
  --r-chip: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--ivory); color: var(--carbon); font: 400 16px/1.55 var(--serif); }
img, svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 1.5px solid var(--oxide); outline-offset: 3px; border-radius: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.overline { font: 500 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.meta { font: 400 12px/1.4 var(--sans); color: var(--graphite); }

/* Ink */
svg.ink { overflow: visible; fill: var(--ink); }
svg.ink.accent { fill: var(--oxide); }

/* Rotating word */
.rot { display: inline-block; position: relative; vertical-align: bottom; white-space: nowrap; transition: width var(--t-std) var(--ease); }
.rot-measure { position: absolute; visibility: hidden; white-space: nowrap; font: inherit; pointer-events: none; }
.rot-word { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}