/**
 * DICE web theme — single source of truth for colors, radii, shadows, and spacing.
 * Change tokens here; component CSS should only reference these variables.
 *
 * Warm neutral palette with one confident rust accent, in the spirit of
 * Claude's own design language: a cream paper background, warm ink text,
 * and terracotta reserved for the things that should draw the eye.
 * Structure mirrors apps/mobile/src/constants/theme.ts:
 *   Palette → semantic Colors → Spacing / Radius / Shadows
 */

:root {
	/* --- Palette (raw brand / system colors) --- */
	--palette-ink: #26211c;
	--palette-ink-dense: #191512;
	--palette-navy: #4a3f35;
	--palette-navy-deep: #2c241d;
	--palette-primary: #c2542d;
	--palette-primary-light: #d97757;
	--palette-primary-deep: #973f20;
	--palette-violet: #5e6ad2;
	--palette-violet-soft: #eef0ff;
	--palette-paper: #fffdfa;
	--palette-mist: #f3ede2;
	--palette-bg: #faf8f2;
	--palette-row-alt: #fbf9f4;
	--palette-field: #faf8f2;
	--palette-ice: #f6efe6;
	--palette-line: #e9e1d3;
	--palette-line-strong: #d9cdb8;
	--palette-muted: #766a5c;
	--palette-success: #3d7a56;
	--palette-green: #3d7a56;
	--palette-green-hover: #326647;
	--palette-amber: #8d7a3b;
	--palette-blue: #5e6ad2;
	--palette-danger: #b6473a;
	--palette-white: #ffffff;

	/* Soft / alpha surfaces derived from palette */
	--palette-primary-a04: rgba(194, 84, 45, 0.05);
	--palette-primary-a08: rgba(194, 84, 45, 0.1);
	--palette-primary-a10: rgba(194, 84, 45, 0.12);
	--palette-primary-a12: rgba(194, 84, 45, 0.14);
	--palette-primary-a15: rgba(194, 84, 45, 0.18);
	--palette-primary-a25: rgba(194, 84, 45, 0.28);
	--palette-primary-a35: rgba(194, 84, 45, 0.38);
	--palette-violet-a08: rgba(194, 84, 45, 0.08);
	--palette-violet-a12: rgba(194, 84, 45, 0.12);
	--palette-violet-a25: rgba(194, 84, 45, 0.25);
	--palette-success-a10: rgba(61, 122, 86, 0.1);
	--palette-green-a22: rgba(61, 122, 86, 0.22);
	--palette-amber-a24: rgba(141, 122, 59, 0.24);
	--palette-navy-a08: rgba(74, 63, 53, 0.08);
	--palette-navy-a10: rgba(74, 63, 53, 0.1);
	--palette-ink-dense-a14: rgba(25, 21, 18, 0.12);
	--palette-green-soft: #e9f3ec;
	--palette-amber-soft: #f7f1df;
	--palette-blue-soft: #f6ece5;

	/* --- Semantic colors (prefer these in new CSS) --- */
	--color-text: var(--palette-ink);
	--color-text-dense: var(--palette-ink-dense);
	--color-text-muted: var(--palette-muted);
	--color-text-on-primary: var(--palette-white);
	--color-background: var(--palette-paper);
	--color-background-app: var(--palette-bg);
	--color-surface: var(--palette-white);
	--color-surface-alt: var(--palette-row-alt);
	--color-surface-mist: var(--palette-mist);
	--color-surface-field: var(--palette-field);
	--color-surface-ice: var(--palette-ice);
	--color-primary: var(--palette-primary);
	--color-primary-light: var(--palette-primary-light);
	--color-primary-pressed: var(--palette-primary-deep);
	--color-primary-soft: var(--palette-primary-a08);
	--color-accent: var(--palette-navy);
	--color-accent-deep: var(--palette-navy-deep);
	--color-accent-brand: var(--palette-violet);
	--color-accent-brand-soft: var(--palette-violet-soft);
	--color-border: var(--palette-line);
	--color-border-strong: var(--palette-line-strong);
	--color-success: var(--palette-success);
	--color-success-soft: var(--palette-success-a10);
	--color-good: var(--palette-green);
	--color-good-soft: var(--palette-green-soft);
	--color-good-hover: var(--palette-green-hover);
	--color-watch: var(--palette-amber);
	--color-watch-soft: var(--palette-amber-soft);
	--color-info: var(--palette-blue);
	--color-info-soft: var(--palette-blue-soft);
	--color-danger: var(--palette-danger);

	/* --- Legacy aliases (existing stylesheets use these names) --- */
	--ink: var(--color-text);
	--navy: var(--color-accent);
	--navy-deep: var(--color-accent-deep);
	--orange: var(--color-primary);
	--orange-light: var(--color-primary-light);
	--orange-deep: var(--color-primary-pressed);
	--paper: var(--color-background);
	--mist: var(--color-surface-mist);
	--line: var(--color-border);
	--line-strong: var(--color-border-strong);
	--muted: var(--color-text-muted);
	--success: var(--color-success);
	--success-light: var(--color-success-soft);
	--bg: var(--color-background-app);
	--panel: var(--color-surface);
	--row-alt: var(--color-surface-alt);
	--field: var(--color-surface-field);
	--green: var(--color-good);
	--green-soft: var(--color-good-soft);
	--amber: var(--color-watch);
	--amber-soft: var(--color-watch-soft);
	--blue: var(--color-info);
	--blue-soft: var(--color-info-soft);

	/* Keep alpha token names used by stylesheets after the orange→neutral swap */
	--palette-orange-a04: var(--palette-primary-a04);
	--palette-orange-a08: var(--palette-primary-a08);
	--palette-orange-a10: var(--palette-primary-a10);
	--palette-orange-a12: var(--palette-primary-a12);
	--palette-orange-a15: var(--palette-primary-a15);
	--palette-orange-a25: var(--palette-primary-a25);
	--palette-orange-a35: var(--palette-primary-a35);

	/* --- Radius --- */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;
	--r: var(--radius-sm);

	/* --- Spacing scale (mirrors mobile Spacing) --- */
	--space-half: 2px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 64px;

	/* --- Layout --- */
	--topnav-height: 54px;
	--content-max: 1120px;

	/* --- Shadows --- */
	--shadow-sm: 0 1px 2px rgba(25, 21, 18, 0.05), 0 1px 3px rgba(25, 21, 18, 0.04);
	--shadow-md: 0 8px 24px rgba(25, 21, 18, 0.07);
	--shadow-nav: 0 16px 36px var(--palette-ink-dense-a14);

	/* --- Focus rings --- */
	--focus-ring: 0 0 0 3px var(--palette-violet-a25);
	--focus-ring-soft: 0 0 0 3px var(--palette-violet-a12);

	/* --- Typography --- */
	--font-sans:
		Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;
	--font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;

	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-background);
}