/*
 * Card Swap design tokens: the working direction, "Night Vault".
 *
 * From the research (docs/research/visual-direction-tcg-*):
 * - dark graphite, never pure black;
 * - hairline borders, not glass;
 * - one saturated action colour that never copies a game's own colours;
 * - card art is the colour;
 * - monospaced numbers for prices, grades, certs and seals;
 * - holo only as a border accent and on the item page's shine.
 *
 * Still provisional: the design review compiles the six directions from
 * design/tokens.json with the contrast contract (docs/SCOPE.md §14). Text pairs
 * here are 4.5:1 or better on --cs-ground and --cs-surface.
 */
:root {
	color-scheme: dark;

	/* Grounds */
	--cs-ground: #0e0f12;
	--cs-sunken: #121419;
	--cs-surface: #1a1d24;
	--cs-raised: #22262f;
	--cs-photobox: linear-gradient(180deg, #191a1e 0%, #34373d 59.4%, #101115 60.6%, #1d1f24 100%); /* the graphite box the store's product photos stand in (tools/seed/photo-box.php) */
	--cs-hair: rgba(255, 255, 255, 0.08);
	--cs-hair-strong: rgba(255, 255, 255, 0.14);

	/* Ink */
	--cs-ink: #f3f4f6;
	--cs-ink-2: #9aa3b2;
	--cs-ink-3: #8a93a3;

	/* The one action colour */
	--cs-action: #b6ff3b;
	--cs-action-ink: #0e0f12;
	--cs-danger: #ff5c5c;

	/* Item states: text on its own 8% tint, 30% border (Gemini's chip spec) */
	--cs-vault: #34d399;
	--cs-vault-bg: rgba(16, 185, 129, 0.08);
	--cs-vault-line: rgba(16, 185, 129, 0.3);
	--cs-psa: #fbbf24;
	--cs-psa-bg: rgba(245, 158, 11, 0.08);
	--cs-psa-line: rgba(245, 158, 11, 0.3);
	--cs-live: #f87171;
	--cs-live-bg: rgba(239, 68, 68, 0.1);
	--cs-live-line: rgba(239, 68, 68, 0.35);
	--cs-trade: #60a5fa;
	--cs-trade-bg: rgba(59, 130, 246, 0.08);
	--cs-trade-line: rgba(59, 130, 246, 0.3);
	--cs-quiet: #9aa3b2;
	--cs-quiet-bg: rgba(154, 163, 178, 0.08);
	--cs-quiet-line: rgba(154, 163, 178, 0.25);

	/* Holo accent: borders and the detail shine only, never a surface */
	--cs-holo: linear-gradient(120deg, #a78bfa 0%, #22d3ee 35%, #b6ff3b 65%, #a78bfa 100%);

	/* Type */
	--cs-font: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cs-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;

	/* Shape */
	--cs-radius-xs: 4px;
	--cs-radius-sm: 8px;
	--cs-radius: 12px;
	--cs-radius-lg: 16px;
	--cs-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	--cs-max: 1200px;

	/* True shapes: a card is 63 x 88 mm; a PSA slab about 1:1.65 (measure one) */
	--cs-card: 5 / 7;
	--cs-slab: 1 / 1.65;
	--cs-box: 1 / 1;
}