/* Trimslot marketing site: Paper theme values from the design system's tokens.json */
:root {
  --paper: #f6efe0;
  --paper-raised: #fffaf0;
  --paper-sunk: #ece1cb;
  --rule: #e3d4b6;
  --rule-strong: #9c8160;
  --ink: #2b1d12;
  --ink-muted: #66503b;
  --ink-faint: #7d6750;
  --chestnut: #6b3a1c;
  --chestnut-strong: #51290f;
  --on-chestnut: #fff7e8;
  --highlighter: #f6c643;
  --on-highlighter: #2b1d12;
  --highlighter-soft: #fbe6a2;
  --nellie: #b0602b;
  --nellie-soft: #f0cfae;
  --stamp-blue: #2b5680;
  --stamp-green: #2c6644;
  --stamp-amber: #8a5a00;
  --stamp-red: #a3301c;
  --scrim: rgba(43, 29, 18, 0.45);
  --focus: #2b5680;
  --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-0: 0px; --radius-sm: 3px; --radius-md: 6px; --radius-tab: 10px; --radius-pill: 999px;
  --shadow-sheet: 0 1px 0 rgba(43,29,18,0.10), 0 18px 40px -24px rgba(43,29,18,0.45);
  --shadow-slip: 0 2px 0 rgba(43,29,18,0.12), 0 10px 24px -10px rgba(43,29,18,0.40);
  --shadow-press: inset 0 2px 0 rgba(43,29,18,0.25);
  --dur-stamp: 240ms; --dur-page: 320ms; --dur-ink: 480ms; --dur-swipe: 560ms; --dur-fade: 2400ms;
  --ease-pen: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-stamp: cubic-bezier(0.3, 1.5, 0.5, 1);
  --ease-page: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--chestnut); }
a:hover { color: var(--chestnut-strong); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wm svg { height: 100%; width: auto; display: block; }
.caps { font: 700 11px/16px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.gut { font: 500 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.hl { background: linear-gradient(transparent 55%, var(--highlighter) 55%, var(--highlighter) 92%, transparent 92%); padding: 0 2px; }
.cta { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 6px; background: var(--highlighter); color: var(--on-highlighter); font: 700 16px/20px var(--font-sans); text-decoration: none; box-shadow: 0 2px 0 var(--chestnut); }
.cta:hover { color: var(--on-highlighter); background: #f2bb2a; }
.cta-ghost { display: inline-flex; align-items: center; min-height: 52px; padding: 0 20px; border-radius: 6px; border: 2px solid var(--rule-strong); color: var(--ink); font: 600 15px/20px var(--font-sans); text-decoration: none; }
.cta-ghost:hover { color: var(--ink); background: var(--paper-sunk); }
.navlink { color: var(--ink); text-decoration: none; font: 600 14px/20px var(--font-sans); }
.navlink:hover { color: var(--chestnut); text-decoration: underline; text-underline-offset: 4px; }
