/* Generated from design-system.json by tokens.mjs. Edit the source, then regenerate. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../assets/fonts/plex-sans.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/plex-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/plex-500.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/news-normal-500.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 480; font-display: swap; src: url("../assets/fonts/news-italic-480.woff2") format("woff2"); }
:root {
	--clio-black: #000000;
	--clio-charcoal: #0d0d0c;
	--clio-graphite: #151412;
	--clio-ivory: #f0ece1;
	--clio-warmGray: #d6cebf;
	--clio-stone: #a3998a;
	--clio-darkLine: #23211d;
	--clio-darkControl: #736a5f;
	--clio-teal: #00d4db;
	--clio-darkTealWash: #052629;
	--clio-paper: #f3eee4;
	--clio-raisedPaper: #faf7f2;
	--clio-ink: #1a1612;
	--clio-softInk: #3c342c;
	--clio-mutedInk: #524a42;
	--clio-lightLine: #d4cbbd;
	--clio-lightControl: #756c5e;
	--clio-deepTeal: #0a666c;
	--clio-lightTealWash: #e3f2f3;
	--clio-copper: #ee852f;
	--clio-deepCopper: #9a4812;
  color-scheme: dark;
	--paper: var(--clio-black);
	--paper-raised: var(--clio-charcoal);
	--paper-sunk: var(--clio-graphite);
	--ink: var(--clio-ivory);
	--ink-soft: var(--clio-warmGray);
	--muted: var(--clio-stone);
	--line: var(--clio-darkLine);
	--line-control: var(--clio-darkControl);
	--accent: var(--clio-teal);
	--accent-soft: var(--clio-darkTealWash);
	--on-accent: var(--clio-black);
	--secondary: var(--clio-copper);
  --font-ui: "IBM Plex Sans", sans-serif;
  --font-display: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", monospace;
  --page: 1248px;
  --measure: 65ch;
  --header: 5rem;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
  --radius: .35rem;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-entry: 640ms;
  --motion-feedback: 1800ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-distance: 12px;
  --motion-stagger: 80ms;
  --code: var(--clio-charcoal); --code-ink: var(--clio-ivory);
  --code-muted: var(--clio-stone); --code-border: var(--clio-darkControl);
  --code-sunk: var(--clio-graphite);
  --selection-bg: var(--accent); --selection-ink: var(--on-accent);
  --menu-shadow: 0 12px 36px color-mix(in srgb, var(--clio-black) 25%, transparent);
  /* Compatibility aliases for the social-card templates. */
  --cyan: var(--accent); --rule: var(--line); --line-strong: var(--ink);
  --well-cyan: var(--clio-teal); --well-sage: var(--clio-teal);
  --paper-elevated: var(--paper-raised);
}
html[data-theme="dark"] {
  color-scheme: dark;
	--paper: var(--clio-black);
	--paper-raised: var(--clio-charcoal);
	--paper-sunk: var(--clio-graphite);
	--ink: var(--clio-ivory);
	--ink-soft: var(--clio-warmGray);
	--muted: var(--clio-stone);
	--line: var(--clio-darkLine);
	--line-control: var(--clio-darkControl);
	--accent: var(--clio-teal);
	--accent-soft: var(--clio-darkTealWash);
	--on-accent: var(--clio-black);
	--secondary: var(--clio-copper);
}
html[data-theme="light"] {
  color-scheme: light;
	--paper: var(--clio-paper);
	--paper-raised: var(--clio-raisedPaper);
	--paper-sunk: var(--clio-lightLine);
	--ink: var(--clio-ink);
	--ink-soft: var(--clio-softInk);
	--muted: var(--clio-mutedInk);
	--line: var(--clio-lightLine);
	--line-control: var(--clio-lightControl);
	--accent: var(--clio-deepTeal);
	--accent-soft: var(--clio-lightTealWash);
	--on-accent: var(--clio-raisedPaper);
	--secondary: var(--clio-deepCopper);
}