/**
 * DragonGate design tokens.
 * Source of truth: docs/design/TOKENS.md — keep in sync.
 * CSS custom properties do not style elements by themselves.
 */
:root {
	color-scheme: light;

	/* Color — ground */
	--ink: #12140f;
	--ink-800: #1c1f17;
	--ink-600: #454a3c;
	--ink-400: #6e7460;
	--paper: #f7f4ec;
	--paper-50: #fcfbf6;
	--paper-100: #efebdd;

	/* Color — chromatic accent (the only one) */
	--ember-100: #f4e2d4;
	--ember: #b8501f;
	--ember-600: #963f16;
	--ember-flow: linear-gradient(115deg, #c96a2e 0%, #b8501f 45%, #8b3a1a 100%);

	/* Color — secondary metal */
	--brass: #9c7a3c;
	--brass-200: #e4d9be;

	/* Color — semantic */
	--success: #3f8a5c;
	--success-100: #e1eee4;
	--warn: var(--brass);
	--error: #b8341f;
	--error-100: #f4dcd6;

	/* Color — hairline */
	--rule: rgba(18, 20, 15, 0.1);
	--rule-strong: rgba(18, 20, 15, 0.2);
	--rule-ink: rgba(247, 244, 236, 0.14);

	/* Type */
	--font-display: 'Fraunces', Georgia, serif;
	--font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* Type scale */
	--t-display: clamp(28px, 3.4vw, 40px);
	--t-h1: clamp(22px, 2.4vw, 28px);
	--t-h2: 20px;
	--t-h3: 16px;
	--t-body: 14px;
	--t-small: 12.5px;
	--t-caption: 11px;
	--t-eyebrow: 10.5px;

	--lh-tight: 1.05;
	--lh-snug: 1.3;
	--lh-prose: 1.55;

	/* Spacing — 4px base */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;

	/* Radius */
	--r-1: 3px;
	--r-2: 6px;
	--r-3: 10px;
	--r-pill: 999px;

	/* Shadow */
	--shadow-card: 0 1px 2px rgba(18, 20, 15, 0.03), 0 6px 16px -10px rgba(18, 20, 15, 0.16);
	--shadow-shell: 0 1px 1px rgba(18, 20, 15, 0.04), 0 8px 24px -12px rgba(18, 20, 15, 0.18),
		0 32px 64px -24px rgba(18, 20, 15, 0.22);
	--shadow-ember: 0 1px 1px rgba(184, 80, 31, 0.25), 0 6px 16px -6px rgba(184, 80, 31, 0.55);

	/* Motion */
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-fast: 120ms;
	--dur-base: 180ms;

	/* Focus */
	--focus-ring: 0 0 0 2px var(--paper-50), 0 0 0 4px var(--ember);

	/* Wizard shell layout */
	--wizard-sidebar-width: 236px;
	--wizard-topbar-height: 44px;

	/* Packet column — Tailwind lg / max-w-5xl */
	--measure: 64rem;
}