/* Rivetti — design tokens (Officina v4 · Stone · Forest · Copper)
   Single source of truth for colors, typography and spacing.
   Used by design-system/officina.html and slides/. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500;700&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root {
  /* --- Palette: Stone · Forest · Copper --- */
  --bg:            #E8E3D6;          /* warm stone (page) */
  --bg-elev:       #F1ECDE;          /* elevated surfaces */
  --panel:         #D9D1BF;          /* panels, secondary cards */
  --fg:            #1C2A22;          /* deep forest, near-black */
  --fg-2:          #3E4E43;          /* secondary text */
  --fg-3:          #717D73;          /* tertiary text, captions */
  --line:          #BEB59E;          /* dividers, borders */
  --line-2:        #CEC6AF;          /* subtle dividers */
  --accent:        #B25A2A;          /* warm copper — the rivet */
  --accent-ink:    #FFF4E8;          /* ink on copper */
  --ok:            #3E6B3A;
  --warn:          #B07A13;
  --err:           #9B2B1F;

  /* --- Type --- */
  --font-display:  'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans:     'Inter Tight', -apple-system, system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* --- Space (8pt base) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* --- Radii (tight; the brand doesn't bubble) --- */
  --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-0: 0;

  /* --- Borders & shadows --- */
  --bd: 1px solid var(--line);
  --bd-2: 1px solid var(--line-2);
  --sh-1: 0 1px 0 rgba(0,0,0,0.04);
  --sh-2: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(15,15,15,0.08);

  /* --- Motion (mechanical, no springs) --- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
}

/* --- Semantic roles --- */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
body { font-size: var(--fs-base); line-height: var(--lh-base); font-variant-numeric: tabular-nums; }
h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -0.015em; }
h3 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h4 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-lg);  line-height: var(--lh-snug); }
p  { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--fg-2); }
small { font-size: var(--fs-sm); color: var(--fg-3); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Rivet glyph (reusable) --- */
.rivet { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 999px; background: currentColor; box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px currentColor; vertical-align: -0.1em; }