/*
 * Design tokens for ryandigitaal.
 *
 * The base palette comes straight from BRAND.md. The four extra accents below
 * it do not: the brand guide asks for one accent per screen, and the brief asks
 * for a colour explosion. Those pull in opposite directions, so the rule is
 * bent in one specific way — purple stays the voice of the brand and owns every
 * interactive element (buttons, links, focus, the cursor), while the extra
 * accents are only ever decoration: gradient fields, blobs, illustration. That
 * keeps a visitor's idea of "purple means I can click it" intact while the page
 * itself is loud.
 */

:root {
	/* Brand, from BRAND.md */
	--ink: #14140f;
	--paper: #f5f4ef;
	--purple: #6e3bf5;
	--purple-deep: #3b1fa8;
	--purple-light: #a88bff;
	--purple-wash: #eee9ff;

	/* Decoration only — never on text, buttons, links or focus rings. */
	--coral: #ff5a3c;
	--amber: #ffb020;
	--teal: #12b5a5;
	--magenta: #ff3d9a;

	--explosion: linear-gradient(
		118deg,
		var(--coral) 0%,
		var(--magenta) 26%,
		var(--purple) 54%,
		var(--purple-deep) 76%,
		var(--teal) 100%
	);

	/*
	 * Dark-mode surfaces. The site is now a committed dark design, but
	 * portal.css depends on --ink staying near-black and --paper staying
	 * near-white, so neither of those (nor the purple family above) is
	 * redefined here. These are new tokens built from the same palette,
	 * for the depth a single flat --ink background can't give on its own.
	 */

	/* A card or panel sitting slightly above the base --ink background. */
	--surface-raised: #211f19;

	/* An inset, recessed area — deeper than --ink, for "screens inside the
	   screen" like the plat/levend comparison visual. */
	--surface-sunken: #0b0b08;

	/* 1px hairlines on dark surfaces. rgb(20 20 15 / 0.1) — the old border
	   colour this replaces — assumed a paper-coloured page and vanishes on
	   ink, so this is paper-tinted and translucent instead. */
	--border-hairline: rgb(245 244 239 / 0.14);

	/* Secondary/muted copy on --ink, --surface-raised or --surface-sunken
	   only. Computed at roughly 7.2:1 against --ink, comfortably over the
	   4.5:1 minimum with room to still read as "quieter" than --paper.
	   Do not use this over --paper or --purple-wash — it fails contrast
	   there, it is a dark-surface colour only. */
	--text-muted: #a5a29a;

	/* Soft purple bloom used behind the pointer-glow and primary CTAs. */
	--glow-purple: rgb(110 59 245 / 0.18);

	/* Type — Inter, scale from BRAND.md: 14 / 16 / 20 / 28 / 40 / 56 */
	--font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--text-small: 0.875rem;
	--text-body: 1rem;
	--text-large: 1.25rem;
	--text-heading-small: 1.75rem;
	--text-heading: 2.5rem;
	--text-display: 3.5rem;

	--line-height-text: 1.6;
	--line-height-heading: 1.15;
	--tracking-heading: -0.02em;

	/* Spacing */
	--space-tiny: 0.5rem;
	--space-small: 1rem;
	--space-medium: 2rem;
	--space-large: 4rem;
	--space-huge: 7rem;

	--radius-small: 6px;
	--radius: 14px;
	--radius-large: 24px;
	--measure: 62ch;

	/* Motion. The cursor blink is specified in BRAND.md: 1.15s, in steps. */
	--speed-fast: 180ms;
	--speed: 320ms;
	--speed-slow: 620ms;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cursor-blink: 1.15s;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--speed-fast: 1ms;
		--speed: 1ms;
		--speed-slow: 1ms;
	}
}

/* The house rules from BRAND.md, applied site-wide. */
::selection {
	background: var(--purple);
	color: var(--paper);
}

:focus-visible {
	outline: 3px solid var(--purple);
	outline-offset: 2px;
}