/*
 * Design tokens for Shrink Ray.
 *
 * The palette takes its pink from the reference image supplied with the brief:
 * a vivid magenta on near-black, set in a heavy italic lowercase wordmark.
 *
 * ------------------------------------------------------------------ COLOUR
 *
 * THE RULE: colour means "look at this". Its absence means "nothing to see."
 *
 * That is why there is no green. A green tick for "fine" spends a whole hue on
 * the outcome you scan straight past, and against a pink brand it reads as a
 * stray traffic light. Instead:
 *
 *   ok / info  -> neutral grey. The ICON carries the meaning, not the colour.
 *   warn       -> amber. Warm, so it sits with pink rather than fighting it.
 *   error      -> red.  Likewise warm.
 *   pink       -> reserved for the app's own signals: active, focused,
 *                 running, done. Never for a severity.
 *
 * Keeping severity and interaction on separate colours is what stops a busy
 * panel turning into confetti.
 *
 * EVERY CONTRAST RATIO BELOW WAS COMPUTED, NOT EYEBALLED. The number in each
 * comment is the measured WCAG 2.1 ratio against the surface named. Thresholds:
 * 7:1 for body and hint text, 4.5:1 for large bold text, 3:1 for non-text UI
 * that has to be seen. If you change a colour, recompute.
 */

:root {
	/* --- surfaces --- */
	--bg: #0b0b0d;
	--panel: #141417;
	--control: #1e1e23;
	--control-hover: #26262c;

	/* Mid grey behind the 3D view, so both white and black wraps show their
	 * edges. 3.47:1 against the panel, 5.30:1 against white content and 3.96:1
	 * against black content. Kept in sync with BACKGROUNDS.midGrey in
	 * src/config/environments.js. */
	--viewport: #6b6b70;

	/*
	 * Glass for the floating viewport overlays.
	 *
	 * THE ALPHA HAS A HARD FLOOR OF 0.70 AND THIS IS WHY: the backdrop is
	 * whatever background the user picked, and one of the options is near-white.
	 * Composited over #f2f2f4, body text only clears 7:1 while the tint stays at
	 * or above 0.70 alpha. Below that the overlays become unreadable on a light
	 * backdrop while still looking fine on the default grey — a bug you would
	 * only find by changing the background. Blur does the rest of the work of
	 * making it feel transparent.
	 */
	--glass: rgba(11, 11, 13, 0.72);
	--glass-blur: blur(14px) saturate(1.1);

	/* --- text --- */
	--text: #f2f2f4;        /* 16.44:1 on panel, 14.85:1 on control */
	--text-dim: #a8a8b4;    /*  7.81:1 on panel,  7.05:1 on control */
	--text-faint: #a0a0aa;  /*  7.09:1 on panel — the credit plate */

	/* --- brand: interaction only, never severity --- */
	--pink: #ff2d95;        /* fills and rings: 5.31:1 on panel, 4.79:1 on control */
	--pink-text: #ff8ac8;   /* pink used AS TEXT: 8.51:1 on panel, 9.10:1 on bg */
	--pink-hover: #ff5cad;
	--pink-ink: #0b0b0d;    /* 5.68:1 on --pink; only legal on large bold text */

	/*
	 * A filled pink surface carrying SMALL text — step badges, active segments.
	 *
	 * --pink is too dark for that: near-black ink on it measures 5.68:1, which
	 * only passes because the Shrink button sets its label at 18px/900 and so
	 * counts as large text. At 11px nothing rescues it. This lighter pink puts
	 * the same ink at 7.08:1.
	 */
	--pink-solid: #ff63a3;

	/* --- severity: the only two hues that interrupt --- */
	--warn: #ffb454;        /* 10.49:1 on panel, 10.70:1 on bg */
	--danger: #ff7575;      /*  7.05:1 on panel,  7.54:1 on bg */

	/* --- lines --- */
	/* Functional: input outlines, control borders, anything whose edge has to be
	 * findable. 3.33:1 on panel, 3.01:1 on control. */
	--line: #686870;
	/* Decorative only: section rules that separate content already separated by
	 * spacing and headings. 1.33:1, and exempt from the 3:1 rule because
	 * removing it entirely would lose no information. */
	--line-soft: #2c2c33;

	/* ------------------------------------------------------------- TYPE ---
	 *
	 * Four sizes and no more. Every piece of text in the app picks one of these;
	 * if something needs a fifth, the layout is probably the thing that is
	 * wrong. Sizes are deliberately small and tight — this is a tool panel, and
	 * the 3D view is what deserves the room.
	 */
	/*
	 * THE PANEL HAS THREE LEVELS AND THEY MUST NOT COMPETE:
	 *
	 *   STEP     "2 Prepare wrap"   --fs-step,  600, --text
	 *   SECTION  "WRAP CAGE"        --fs-section, 700, UPPERCASE, --text-dim
	 *   OPTION   "Grid detail"      --fs-base,  400, --text
	 *
	 * The section sits between the two in importance but is the SMALLEST of the
	 * three, which only works because it is also uppercase, letterspaced and
	 * grey — that combination reads as a divider rather than as content, so it
	 * organises the column without shouting over the options inside it.
	 *
	 * Getting this backwards is what the first version did: options were set
	 * larger and whiter than the section headings above them, so the headings
	 * looked like captions belonging to the control beneath.
	 */
	--fs-micro: 10px;    /* counts, badges, mono meta */
	--fs-section: 10.5px;/* group headings — uppercase and letterspaced */
	--fs-small: 11px;    /* readouts, secondary lines */
	--fs-base: 12px;     /* option labels, values, buttons — the workhorse */
	--fs-step: 13.5px;   /* numbered step titles */
	--fs-brand: 21px;    /* the wordmark */

	--font-display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

	/* ---------------------------------------------------------- METRICS ---
	 *
	 * ONE control height for everything interactive. Buttons, selects, colour
	 * swatches and text inputs all sit on --row-h, which is what makes a column
	 * of mixed controls read as a single list instead of a pile. Do not give a
	 * control its own height.
	 */
	--row-h: 28px;
	--row-h-sm: 24px;
	--topbar-h: 46px;

	--radius: 5px;
	--radius-lg: 9px;

	/* Panel padding, used for every section so the left edges line up down the
	 * whole column. */
	--pad-x: 14px;
	--pad-y: 12px;

	--panel-width: 288px;
	--results-width: 288px;

	/* Reserved so a value readout can never change a row's width mid-drag. See
	 * the note in controls.css — the UI must not resize while a slider is being
	 * dragged. */
	--readout-width: 76px;

	--icon: 16px;
	--icon-sm: 14px;
}