/* ascii-anima design tokens — the one place colour, type, space and size are
   named. Both pages link this first: the mapper (styles.css) and the gallery
   (gallery/gallery.css). mapper/tokens.js reads these for its canvases. */
:root{
	/* ── colour ── */
	--bg:#131316; --bg2:#1a1a1e; --tx:#ECECE9; --mut:#ECECE999; --dim:#ECECE966;
	--line:#ECECE920; --line2:#ECECE938; --am:#fdb257; --am-soft:#fdb2571f;
	/* alpha steps the canvases paint with (mapper/tokens.js reads them, so the
	   graphs use the same colours as the page). Each is the canvas code's old
	   rgba() literal as 8-digit hex; canvas rounds alpha to 8 bits, so these
	   draw the very same pixels. --am-soft (12%) is the histogram's fill. */
	--warn:#ff4d4d;       /* a slider past its safe range (the blast radius above 0.6) */
	--am-fill:#fdb2571a;  /* amber 10%: the motion curve's fill */
	--tx-08:#ECECE914;    /* ink 8%: graph gridlines */
	--tx-30:#ECECE94d;    /* ink 30%: the graph's home line */
	--tx-40:var(--dim);   /* ink 40%: pinned curve endpoints */
	--tx-45:#ECECE973;    /* ink 45%: graph labels */
	--tx-70:#ECECE9b3;    /* ink 70%: playhead line */
	--bg-90:#131316e6;    /* page 90%: band edges on the gradient bars */
	/* the gallery page's faint layers (index.html), same scheme */
	--tx-04:#ECECE90a;    /* ink 4%: the hero's engineering grid, every 48px */
	--tx-02:#ECECE905;    /* ink 2%: the fine 8px grid */
	--tx-03:#ECECE908;    /* ink 3%: scanlines over the frames */
	--am-40:#fdb25766;    /* amber 40%: the hero's load sweep */
	--am-45:#fdb25773;    /* amber 45%: the crosshair reticle */
	--bg-80:#131316cc;    /* page 80%: under chips and coordinates */
	--shadow:0 14px 36px #00000099; /* the gallery's mapper board: lifts each screenshot off the page */

	/* ── type ── */
	--mono:"Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
	/* the motion curve's labels have always been drawn in this stack, without
	   Cascadia Mono; kept apart so the graph renders exactly as before */
	--mono-graph:"Space Mono", ui-monospace, Consolas, monospace;
	/* the display face: the gallery's wordmark, section titles and work titles.
	   Loaded from Google Fonts
	   by index.html; falls back to the mono stack offline. The mapper does not
	   use it: a tool page stays in one voice. */
	--display:"Space Grotesk", var(--mono);
	/* running paragraphs on the gallery: the display family at 400, not mono */
	--body:"Space Grotesk", system-ui, sans-serif;
	--fs-2xs:9px;   /* canvas labels only */
	--fs-xs:10px; --fs-sm:11px; --fs-md:12px; --fs-base:13px; --fs-lg:14px; --fs-h:15px;
	/* the gallery's display sizes, set in --display */
	--fs-work:clamp(1rem, 1.25vw, 1.15rem);      /* a work's title, a sub-heading */
	--fs-work-lg:clamp(1.15rem, 1.6vw, 1.4rem);  /* the featured work's title */
	--fs-title:clamp(1.6rem, 3vw, 2.6rem);       /* a section title */
	--fs-mark:clamp(3rem, 7vw, 7.5rem);          /* the wordmark */
	--ls-note:.02em; --ls-btn:.05em; --ls-label:.06em; --ls-head:.08em;
	--ls-micro:.12em;    /* mono micro labels (credits, strips) */
	--ls-tight:-.035em;  /* the wordmark and section titles */

	/* ── space ── (a value used only once stays literal where it is) */
	--s-1:4px; --s-2:6px; --s-3:8px; --s-4:10px; --s-5:14px; --s-6:16px; --s-7:20px; --s-8:22px;
	/* page rhythm (the gallery's sections and hero) */
	--s-9:32px; --s-10:48px; --s-11:72px; --s-12:112px;

	/* ── sizes ── */
	--bar:56px;            /* the top bar */
	--inspector-w:400px;   /* the settings column */
	--h-ctl:34px;          /* buttons, selects */
	--h-ctl-sm:30px;       /* small buttons, segmented rows */
	--h-row:28px;          /* checkbox rows, tone handle rows */
	--h-slider:22px;       /* range inputs */
	--handle:21px;         /* tone handles and their pickers */
	--h-curve:190px;       /* the motion curve (mapper/curve.js falls back to 190 while hidden) */
	--h-hist:34px;         /* the tone histogram */
	--h-bar:30px;          /* the gradient bars */
	--bw:1px; --bw-2:2px; --bw-3:3px;   /* border / outline widths */
	/* the gallery page's layout */
	--wrap:1320px;                          /* content width */
	--gutter:clamp(var(--s-6), 4vw, var(--s-10)); /* side padding */
	--hero-h:82vh;                          /* the hero frames' tallest height */
	--arm:10px; --arm-hover:12px;           /* HUD bracket arms on the frames */
	/* the 900px breakpoint lives in the @media rule at the bottom: a custom
	   property cannot be used inside a media query */
}

/* THE PAGE TYPE SCALE. The compact scale above is the base; both pages set
   body.page and share standard web sizes: 16px body copy, 14px secondary
   text, 12px micro labels. Same token names, so every rule picks it up. */
.page{
	--fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:16px; --fs-lg:18px; --fs-h:20px;
	--inspector-w:440px; /* the mapper's settings column, for the larger type */
}