/* Spoolette tokens. Carmyn's pick, 2026-10-09: the eyes logo, Sanzo Wada's Deep Indigo / Jasper Red /
 * Benzol Green (his combination 155), Literata headings, Atkinson Hyperlegible Next text, Jost for the
 * logo. Source and contrast table: branding/kit/README.md.
 * "derived" = picked here, to pass WCAG AA. Light only.
 */

:root {
	/* Brand: Sanzo Wada */
	--spool-indigo: #051230;      /* Deep Indigo */
	--spool-jasper: #eb5324;      /* Jasper Red: graphics only, never small text (3.6:1 on white) */
	--spool-benzol: #00978d;      /* Benzol Green: graphics only, never small text (3.6:1 on white) */

	/* Derived */
	--spool-indigo-hover: #12295c;  /* Deep Indigo, lifted, for button hover */
	--spool-jasper-ink: #b83c14;    /* Jasper Red darkened: 5.7:1 on white, for error text */
	--spool-benzol-ink: #007068;    /* Benzol Green darkened: 6.0:1 on white, for status text */
	--spool-ink: #1f1f1f;
	--spool-muted: #5a5a5a;

	/* Type */
	--font-ui: "Atkinson Hyperlegible Next", Arial, sans-serif;
	--font-heading: "Literata", Georgia, serif;
	--font-mark: "Jost", "Century Gothic", sans-serif;
	--weight-regular: 400;
	--weight-bold: 700;
	--weight-heading: 600;
	--weight-mark: 500;

	--fs-xs: 0.8125rem;  /* 13px, the floor for anything carrying information */
	--fs-sm: 0.875rem;   /* 14px */
	--fs-md: 1rem;       /* 16px */
	--fs-lg: 1.125rem;   /* 18px */
	--fs-xl: 1.375rem;   /* 22px */
	--fs-2xl: 1.75rem;   /* 28px */

	--lh-tight: 1.2;
	--lh-ui: 1.5;

	/* Space */
	--sp-1: 0.44rem;
	--sp-2: 0.67rem;
	--sp-3: 1rem;
	--sp-4: 1.5rem;
	--sp-5: 2.25rem;
	--sp-6: 3.38rem;

	/* Shape */
	--r-control: 0.5rem;
	--r-panel: 0.875rem;
	--r-pill: 999px;
	--border-w: 1px;

	--page-max: 100rem;
	--band-h: 3.75rem;
	--ease: 120ms ease;

	/* Semantic */
	--ground: #ffffff;
	--surface: #ffffff;
	--text: var(--spool-ink);
	--text-muted: var(--spool-muted);
	--heading: var(--spool-indigo);
	--line: #e2e2e2;
	--line-strong: #c8c8c8;

	--link: var(--spool-indigo);
	--link-hover: var(--spool-benzol-ink);
	--accent: var(--spool-indigo);
	--accent-hover: var(--spool-indigo-hover);
	--on-accent: #ffffff;
	--focus: var(--spool-benzol);

	/* Top bar: white, the logo in Deep Indigo */
	--band: #ffffff;
	--on-band: var(--spool-indigo);
	--band-edge: #e2e2e2;

	/* The player */
	--stage: var(--spool-indigo);       /* behind the video and thumbnails */
	--play: var(--spool-jasper);        /* play marks; a white triangle on it is 3.6:1, fine for a graphic */
	--on-play: #ffffff;
	--iris: var(--spool-benzol);

	/* Status */
	--ok: var(--spool-benzol-ink);
	--on-ok: #ffffff;
	--ok-tint: #e6f4f3;                 /* Benzol Green at 10% on white */
	--bad: var(--spool-jasper-ink);
	--on-bad: #ffffff;
	--bad-tint: #fdeee9;                /* Jasper Red at 10% on white */
	--info: var(--spool-indigo);
	--info-tint: #eef0f4;               /* Deep Indigo at 7% on white */
	--hilite: rgba(0, 151, 141, 0.22);  /* search matches in the transcript */

	--shadow-panel: none;
	color-scheme: light;
}