/* ==========================================================================
   Design tokens — the single source of truth.

   Colors, spacing, type, radii, motion. Nothing else belongs in this file, and
   no other file should hardcode these values. See docs/design-system.md.
   ========================================================================== */

:root {
	/* --- Color -------------------------------------------------------------
	   One accent. #FFD500 is the only saturated color on the site; if a page
	   looks yellow, something is overusing it. */
	/* Channel triplets, so alpha variants below never restate the hex. Change
	   the brand color here and every tint follows. */
	--brand-rgb: 255, 213, 0;
	--bg-rgb: 10, 10, 10;

	--color-brand: rgb(var(--brand-rgb));
	--color-brand-bright: #ffde33; /* hover only — brand lifted, same hue */
	--color-brand-ink: #0a0a0a;

	/* Brand-tinted border, for anything that should read as energised rather
	   than merely outlined. */
	--color-border-brand: rgba(var(--brand-rgb), 0.32);

	/* --- Glow --------------------------------------------------------------
	   Neon in the brand hue, never white and never a second color. Two layers:
	   a tight bright core plus a wide soft bloom. That pairing is what reads as
	   emissive — a single wide shadow just looks like fog. */
	--glow-sm: 0 0 12px rgba(var(--brand-rgb), 0.35);
	--glow-md: 0 0 16px rgba(var(--brand-rgb), 0.45), 0 0 40px rgba(var(--brand-rgb), 0.18);
	--glow-lg: 0 0 24px rgba(var(--brand-rgb), 0.55), 0 0 64px rgba(var(--brand-rgb), 0.22);
	/* For text and icons, where box-shadow doesn't apply. */
	--glow-text: 0 0 18px rgba(var(--brand-rgb), 0.45);

	--color-bg: #0a0a0a;
	--color-surface: #141414;
	--color-surface-2: #1c1c1c;

	--color-border: rgba(255, 255, 255, 0.08);
	--color-border-strong: rgba(255, 255, 255, 0.14);

	/* Outlining a control is a different job from separating two blocks. A
	   divider only has to be found once, by someone already reading past it; a
	   button's edge is the whole affordance. At 0.08 alpha that edge resolves to
	   about #2a2a2a on the page background, which is effectively invisible. This
	   is the alpha at which it clears the 3:1 WCAG 1.4.11 floor for a UI
	   boundary, over --color-bg and --color-surface both. */
	--color-border-control: rgba(255, 255, 255, 0.36);

	--color-text: #ffffff;
	--color-text-muted: #a1a1aa;

	/* The third text level, for timestamps, counts and legal lines. It was #71717a,
	   which is 4.10:1 on --color-bg and 3.53:1 on --color-surface-2 — under the 4.5:1
	   AA floor on every surface we actually put it on, not just the darkest. The
	   scheduling plugin hit this first and worked around it by moving its secondary
	   text to --color-text-muted; the token itself stayed wrong, so every other use
	   kept failing quietly.
	   #83838c is the lowest value in the same zinc family that clears 4.5:1 against
	   bg, surface and surface-2 alike (5.27, 4.90, 4.54). It stays well clear of
	   --color-text-muted at 6.65–7.72, so this is still a third level and not a
	   rounding of the second. Don't darken it back for looks. */
	--color-text-faint: #83838c;

	/* --- Spacing — strict 8px ----------------------------------------------
	   Every margin, padding and gap resolves to one of these. --space-half is
	   for optical nudges inside a component only, never for layout. */
	--space-half: 4px;
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 40px;
	--space-6: 48px;
	--space-7: 56px;
	--space-8: 64px;
	--space-10: 80px;
	--space-12: 96px;
	--space-15: 120px;
	--space-20: 160px;

	/* Rhythm between major sections. Tightens on small screens (see base.css). */
	--section-gap: var(--space-15);

	/* --- Layout ------------------------------------------------------------ */
	--container: 1280px;
	--measure: 760px;
	--gutter: var(--space-3);

	/* --- Type -------------------------------------------------------------- */
	--font-heading: "Poppins", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--fs-display: clamp(3rem, 1.6rem + 6vw, 5.25rem); /* 48 → 84 */
	--fs-h1: clamp(2.5rem, 1.7rem + 3.4vw, 3.75rem); /* 40 → 60 */
	--fs-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem); /* 32 → 44 */
	--fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); /* 22 → 26 */
	--fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18 → 20 */
	--fs-base: 1rem;
	--fs-sm: 0.875rem;
	--fs-label: 0.75rem;

	--lh-tight: 1.05;
	--lh-heading: 1.15;
	--lh-body: 1.65;

	--tracking-display: -0.03em;
	--tracking-heading: -0.02em;
	--tracking-label: 0.12em;

	/* --- Controls -----------------------------------------------------------
	   One height for every interactive control, so a button and an input can sit
	   on the same row without either one being nudged to fit. 48px, a multiple
	   of 8 and a comfortable touch target. */
	--control-h: 48px;

	/* --- Radii ------------------------------------------------------------- */
	--radius-btn: 12px;
	--radius-card: 16px;
	--radius-sm: 8px;
	--radius-pill: 999px;

	/* --- Elevation --------------------------------------------------------- */
	--shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.5);

	/* --- Motion ------------------------------------------------------------
	   Opacity and translateY(4–8px) only. Nothing moves further than 8px. */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 160ms;
	--dur-reveal: 600ms;
	--lift: -4px;

	/* --- Dot grid ---------------------------------------------------------- */
	--dot-pitch: 32px;
	--dot-color: rgba(255, 255, 255, 0.05);
}

/* The site is dark by design, not by preference — there is no light mode. Declaring
   the scheme stops the UA painting light form controls and scrollbars over it. */
:root {
	color-scheme: dark;
}