/* LoomCamp design tokens. Source of truth: /design.md. Every page loads this file first. */
/* Self-hosted fonts (OFL), latin subset. */
@font-face { font-family: "Big Shoulders Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/geist-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/geist-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/geist-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/geist-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --color-paper:       oklch(95.5% 0.010 160);
  --color-paper-2:     oklch(92.5% 0.012 160);
  --color-paper-3:     oklch(89% 0.014 160);
  --color-ink:         oklch(21% 0.016 165);
  --color-ink-2:       oklch(37% 0.014 165);
  --color-muted:       oklch(47% 0.012 165);
  --color-rule:        oklch(78% 0.014 160);
  --color-rule-2:      oklch(86% 0.010 160);
  --color-pine:        oklch(30% 0.035 165);
  --color-pine-ink:    oklch(95.5% 0.010 160);
  --color-pine-muted:  oklch(78% 0.016 160);
  --color-accent:      oklch(64% 0.185 42);
  --color-accent-ink:  oklch(21% 0.016 165);
  --color-accent-text: oklch(50% 0.135 40);
  --color-focus:       oklch(59% 0.17 42);
  --color-error:       oklch(48% 0.15 28);

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-display:   clamp(2.75rem, 6vw + 1rem, 5.5rem);
  --text-display-s: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --text-2xl: 2.25rem;
  --text-xl:  1.625rem;
  --text-lg:  1.25rem;
  --text-md:  1.0625rem;
  --text-sm:  0.875rem;
  --text-xs:  0.75rem;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --measure: 60ch;
  --page-max: 72rem;
  --gutter: clamp(1rem, 4vw, 3rem);

  --rule: 1px solid var(--color-rule);
  --rule-2: 1px solid var(--color-rule-2);
  --rule-heavy: 3px solid var(--color-ink);
  --radius: 2px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  color-scheme: light;
}