/* GENERATED by qr/bin/sync-tokens.mjs from @scutoons/tokens (shared/tokens) – do not edit, run the script. */

/*
 * @scutoons/tokens: design tokens as CSS custom properties (agents/DESIGN.md Part 1).
 * The single source of style for viewer, creator, admin and the server's public pages.
 */
:root {
	/* ── Color ─────────────────────────────────────────────────────────────── */
	/* text, headings, primary button bg, 2px structural borders */
	--ink: #000000;
	/* page bg, text on ink, secondary buttons */
	--paper: #ffffff;
	/* signature accent: fills and glows only, never text or small icons (~1.8:1 on paper) */
	--primary-cyan: #00d1ff;
	/* acid VFX trio: onomatopoeia / interaction highlights in the VN layer only */
	--acid-purple: #b300ff;
	--acid-green: #37ff00;
	--acid-red: #ff1900;
	/* border escalation: subtle → muted → hover → ink */
	--border-subtle: #dddddd;
	--border-muted: #cccccc;
	--border-hover: #333333;
	--surface-hover: #f0f0f0;
	--surface-panel: #f5f5f5;
	--surface-tint-cyan: #f0fcff;
	/* the only non-black text: dates, numbers, meta (5.3:1 on paper) */
	--text-muted: #6b6b6b;

	/* App UI states (creator / admin forms and problem lists). Not part of the reader palette. */
	--state-error: #ff1900;
	--state-warning: #ff6600;

	/* Legacy names used by viewer components (same values) */
	--primary-color: var(--primary-cyan);
	--color-acid-purple: var(--acid-purple);
	--color-acid-green: var(--acid-green);
	--color-acid-red: var(--acid-red);

	/* ── Spacing ───────────────────────────────────────────────────────────── */
	--space-025: 0.25rem;
	--space-05: 0.5rem;
	--space-075: 0.75rem;
	--space-1: 1rem;
	--space-15: 1.5rem;
	--space-3: 3rem;

	/* ── Radius (square is the brand signature) ────────────────────────────── */
	--radius-none: 0;
	/* avatars, inventory count badge */
	--radius-sm: 0.5rem;
	/* circular icon toggles, map markers only */
	--radius-full: 50%;

	/* ── Borders (borders over shadows, no elevation scale) ───────────────── */
	--border-width-hairline: 1px;
	--border-width-regular: 2px;

	/* ── Type: one family, no heading scale ───────────────────────────────── */
	--font-mono: 'IBM Plex Mono', monospace;
	/* comic lettering (text boxes `font: 'lettering'`, sfx) */
	--font-lettering: 'Bangers', 'IBM Plex Mono', monospace;
	--font-weight-regular: 400;
	--font-weight-bold: 700;
	/* type styles: size / line height */
	--type-body-size: 1rem;
	--type-body-line: 1.4;
	--type-button-size: 1rem;
	--type-button-line: 1.35; /* not 1: clipped labels (ellipsis) cut g, p, q (owner 2026-10-03) */
	--type-label-size: 1rem;
	--type-label-line: 1.2;
	--type-caption-size: 0.75rem;
	--type-caption-line: 1.3;
	--type-nav-micro-size: 0.625rem;
	--type-nav-micro-line: 1;
	/* fluid root font size (applied in base.css): < 480px · baseline · ≥ 768px */
	--root-size-small: 14px;
	--root-size: 16px;
	--root-size-large: 24px;

	/* ── Tools (creator, admin, embassy; tools.css, DESIGN.md "Brutalist tools") ── */
	/* uppercase labels (owner 2026-10-02: bold only very rarely; bold mono caps clump at small sizes):
	   regular-weight caps (every label, heading, header, chip) · bold caps, if ever (the rare emphasis) */
	--tracking-label: 0.08em;
	--tracking-label-bold: 0.12em;
	/* page title of a tool page (like the landing page's "TOONS"), the only size above 1rem */
	--type-title-size: 1.5rem;
	--type-title-line: 1.15;
	/* fields, nav entries, clickable rows: as tall as a compact button (2rem + its 2px frame; rem only, owner
	   2026-10-01: 32 · 36 · 52 px at the fluid root) */
	--control-height: calc(2rem + 2 * var(--border-width-regular));
	/* focus = a thick ink outline outside the 2px frame */
	--border-width-focus: 3px;
	--focus-offset: 2px;
	/* the tool frame: top bar = bottom ActionBar height, sidebar, Info panel (rem: they grow with the text) */
	--tool-bar-height: max(48px, 3rem);
	--tool-sidebar-width: 12rem;
	--tool-panel-width: 16rem;

	/* ── Badges (status chips, tags, counts): FILLED, white text where it reaches 4.5:1, else ink ──────── */
	/* the one place for the badge colours (owner 2026-10-01; DESIGN.md "Brutalist tools" lists the ratios) */
	--badge-published: #00d1ff; /* published, live, signed – ink 11.56:1 (white 1.82) */
	--badge-published-text: var(--ink);
	--badge-draft: #6b6b6b; /* draft, unclaimed, saved not published – white 5.33:1 */
	--badge-draft-text: var(--paper);
	--badge-soon: #b300ff; /* coming soon, announced – white 4.82:1 */
	--badge-soon-text: var(--paper);
	--badge-error: #ff1900; /* error, revoked, missing – ink 5.39:1 (white 3.90) */
	--badge-error-text: var(--ink);
	--badge-warning: #ff6600; /* warning, unsaved, too long – ink 7.15:1 (white 2.94) */
	--badge-warning-text: var(--ink);
	--badge-info: #0066cc; /* info – white 5.57:1 */
	--badge-info-text: var(--paper);
	--badge-neutral: #000000; /* neutral, claimed, source, tags – white 21:1 */
	--badge-neutral-text: var(--paper);

	/* ── Motion: utilitarian, nothing > ~0.3s for UI state ────────────────── */
	--duration-fast: 0.1s;
	--duration-base: 0.2s;
	--duration-slow: 0.3s;
	--easing: ease;
}

/* Touch screens: the 44px touch-target minimum for fields, list rows and buttons (owner 2026-10-01: sizes in rem,
   the 44px floor only for coarse pointers – desktop stays rem-only). Everything that uses --control-height follows. */
@media (pointer: coarse) {
	:root {
		--control-height: max(44px, calc(2rem + 2 * var(--border-width-regular)));
	}
}

/* fonts.css: IBM Plex Mono (SIL OFL 1.1, ./fonts/IBMPlexMono-OFL.txt) */

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/-F63fjptAgt5VM-kVkqdyU8n1iIq129k.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/-F63fjptAgt5VM-kVkqdyU8n1isq129k.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/-F63fjptAgt5VM-kVkqdyU8n1iAq129k.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/-F6qfjptAgt5VM-kVkqdyU8n3pQPwl1FgtIU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/-F6qfjptAgt5VM-kVkqdyU8n3pQPwlRFgtIU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/-F6qfjptAgt5VM-kVkqdyU8n3pQPwl9FgtIU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/-F6qfjptAgt5VM-kVkqdyU8n3pQPwl5FgtIU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/-F6qfjptAgt5VM-kVkqdyU8n3pQPwlBFgg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext italic 400 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/ibm-plex-mono-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin italic 400 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/ibm-plex-mono-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext italic 700 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/ibm-plex-mono-latin-ext-700-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin italic 700 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/ibm-plex-mono-latin-700-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * @scutoons/tokens: base element styles shared by every app (needs tokens.css + fonts.css).
 * Fluid root font size: 14px < 480px, 16px baseline, 24px ≥ 768px. Never hardcode px overrides that break it – the
 * tools (creator, admin, embassy) use it too (tools.css, DESIGN.md "Brutalist tools"; owner 2026-10-01).
 */
html {
	font-size: 16px;
	font-family: var(--font-mono);
	font-weight: 400;
	font-style: normal;
}

body {
	background: var(--paper);
	font-family: var(--font-mono);
	font-weight: 400;
	font-style: normal;
	max-width: 100%;
	margin: 0;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-mono);
	font-weight: 400;
	font-style: normal;
}

p {
	font-family: var(--font-mono);
	font-weight: 400;
	font-style: normal;
	margin-bottom: 0;
	line-height: 1.4;
}

/*
 * Form controls don't inherit the font (the browser gives them its own, e.g. Arial 13.33px), code/kbd/samp/pre get
 * the generic `monospace`. :where() keeps the specificity at 0: any app or component rule still wins.
 */
:where(button, input, select, textarea, optgroup) {
	font: inherit;
}

:where(code, kbd, samp, pre) {
	font-family: var(--font-mono);
}

/* custom properties can't be used in media queries: keep in sync with --root-size-* in tokens.css */
@media (min-width: 768px) {
	html {
		font-size: 24px;
	}
}

@media (max-width: 480px) {
	html {
		font-size: 14px;
	}

	p {
		line-height: 1.3;
	}
}