/*
 * Design tokens — every color, font, size, and radius the site uses, in one place.
 * Other stylesheets only ever refer to these variables, never to raw values,
 * so changing the accent (or anything else) here changes it everywhere.
 *
 * Palette modelled on a minimal near-black developer-tool look, with a purple accent.
 */
:root {
	/*
	 * Accent — the one brand color. Change this single line to re-theme the site;
	 * every shade below is derived from it. Alternatives: #8b5cf6 (deeper), #a78bfa (lighter).
	 */
	--accent: #9b7bf7;
	--accent-strong: color-mix(in srgb, var(--accent) 80%, black);        /* hover / pressed */
	--accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);     /* button & logo glow */
	--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);     /* tinted backgrounds, e.g. chips */
	--accent-border: color-mix(in srgb, var(--accent) 25%, transparent);
	--on-accent: #0a0a0a;         /* text on top of an accent-filled button */

	/* Surfaces, darkest to lightest */
	--bg: #0a0a0a;                /* page */
	--surface: #111111;           /* cards, panels */
	--surface-raised: #151515;    /* inputs, hovered cards */
	--surface-highlight: #1a1a1a; /* selected / pressed */

	/* Borders */
	--border: #1a1a1a;
	--border-strong: #2a2a2a;
	--deco-line: #1c1c1c;         /* the thin rings around the homepage logo */
	--deco-line-soft: #161616;

	/* Text, most to least prominent */
	--text: #e0e0e0;              /* headings, key numbers — soft white, never pure #fff (glare) */
	--text-body: #c0c0c0;         /* paragraphs */
	--text-muted: #a0a0a0;        /* labels, secondary info, explanatory text */
	--text-faint: #7a7a7a;        /* hints, placeholders — dimmest that stays readable on cards */

	/* Score bands everywhere scores are shown: strong (75+), getting there (60–74), a real gap (<60).
	   Soft tints of green, yellow, and red so they read on near-black without glaring. */
	--score-strong: #4ade80;
	--score-mid: #facc15;
	--score-weak: #f87171;

	/* Syntax colors for code shown on the page (the landing showcase) — muted, so code never outshines the UI */
	--code-keyword: #c4b0fb;
	--code-annotation: #e5c07b;
	--code-string: #a5d6a7;
	--code-type: #8fd3dc;
	--code-comment: #6b6b6b;
	--code-line-number: #4a4a4a;
	--code-hot: color-mix(in srgb, var(--accent) 14%, transparent);   /* a highlighted line */

	/* Nav bar: the page color, slightly see-through (blurred content shows behind it) */
	--nav-bg: rgba(10, 10, 10, 0.8);

	/* Status: solid color, tinted background, border, and readable text for each */
	--success: #22c55e;
	--success-soft: rgba(34, 197, 94, 0.1);
	--success-border: rgba(34, 197, 94, 0.35);
	--success-text: #86efac;
	--warning: #f59e0b;
	--warning-soft: rgba(245, 158, 11, 0.12);
	--danger: #ef4444;
	--danger-soft: rgba(239, 68, 68, 0.1);
	--danger-border: rgba(239, 68, 68, 0.35);
	--danger-text: #fca5a5;

	/* Type */
	--font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-md: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.5rem;
	--text-2xl: 2rem;
	--text-3xl: 2.5rem;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;

	/* Shape */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	--content-width: 1080px;
	--nav-height: 64px;
	--transition: 150ms ease;
}