/**
 * Chesshir Stone design tokens
 * Source of truth for current CSS and future Tailwind/React theme.
 * Colors from Chesshir Stone brand guide (logo / COLORS swatches).
 * Release: 20260727c — primary teal #005363 (replaces old retail red).
 *
 * Naming is Tailwind-ready:
 *   --cs-color-*  → theme.extend.colors.cs.*
 *   --cs-space-*  → theme.extend.spacing
 *   --cs-radius-* → theme.extend.borderRadius
 *   --cs-border-* → theme.extend.borderWidth / borderColor
 */

:root {
	/* Colors — brand guide */
	--cs-color-ink: #060606;
	--cs-color-slate: #5a7378;
	--cs-color-primary: #005363;
	--cs-color-primary-hover: #003d4a;
	--cs-color-teal: #0b6476;
	--cs-color-accent: #459ba0;
	--cs-color-sky: #77b7c7;
	--cs-color-tan: #d59e70;
	--cs-color-surface: #f0f0ee;
	--cs-color-white: #ffffff;
	--cs-color-black: #060606;
	--cs-color-border: #d4d8d8;
	--cs-color-border-strong: #b8c4c6;
	--cs-color-focus: #77b7c7;

	/* Legacy aliases — map old names to brand guide roles */
	--cs-color-red: var(--cs-color-primary);
	--cs-color-red-dark: var(--cs-color-primary-hover);
	--cs-color-stone-blue: var(--cs-color-sky);
	--cs-color-cream: var(--cs-color-surface);

	--cs-ink: var(--cs-color-ink);
	--cs-slate: var(--cs-color-slate);
	--cs-primary: var(--cs-color-primary);
	--cs-primary-hover: var(--cs-color-primary-hover);
	--cs-teal: var(--cs-color-teal);
	--cs-accent: var(--cs-color-accent);
	--cs-sky: var(--cs-color-sky);
	--cs-tan: var(--cs-color-tan);
	--cs-surface: var(--cs-color-surface);
	--cs-red: var(--cs-color-primary);
	--cs-red-dark: var(--cs-color-primary-hover);
	--cs-stone-blue: var(--cs-color-sky);
	--cs-cream: var(--cs-color-surface);
	--cs-white: var(--cs-color-white);
	--cs-black: var(--cs-color-black);
	--cs-border: var(--cs-color-border);

	/* Spacing (4px scale → Tailwind spacing) */
	--cs-space-1: 0.25rem; /* 4 */
	--cs-space-2: 0.5rem; /* 8 */
	--cs-space-3: 0.75rem; /* 12 */
	--cs-space-4: 1rem; /* 16 */
	--cs-space-5: 1.25rem; /* 20 */
	--cs-space-6: 1.5rem; /* 24 */
	--cs-space-8: 2rem; /* 32 */

	/* Radius */
	--cs-radius-sm: 6px;
	--cs-radius-md: 8px;
	--cs-radius-lg: 10px;
	--cs-radius-full: 999px;

	/* Borders — default thin (match Find a Yard) */
	--cs-border-width: 1px;
	--cs-border-width-focus: 1px;

	/* Type */
	--cs-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cs-text-xs: 0.75rem;
	--cs-text-sm: 0.875rem;
	--cs-text-base: 1rem;
	--cs-font-medium: 600;
	--cs-font-bold: 700;
	--cs-font-black: 800;

	/* Elevation */
	--cs-shadow: 0 8px 24px rgba(0, 83, 99, 0.14);
	--cs-shadow-sm: 0 1px 0 var(--cs-color-border);

	/* Layout */
	--cs-container: 1280px;
	--cs-header-z: 100050;

	/* Control heights */
	--cs-control-h: 44px;
}

/**
 * Future Tailwind bridge (do not invent parallel tokens):
 *
 * theme: {
 *   extend: {
 *     colors: {
 *       cs: {
 *         ink: 'var(--cs-color-ink)',
 *         slate: 'var(--cs-color-slate)',
 *         primary: 'var(--cs-color-primary)',
 *         'primary-hover': 'var(--cs-color-primary-hover)',
 *         teal: 'var(--cs-color-teal)',
 *         accent: 'var(--cs-color-accent)',
 *         sky: 'var(--cs-color-sky)',
 *         tan: 'var(--cs-color-tan)',
 *         surface: 'var(--cs-color-surface)',
 *         border: 'var(--cs-color-border)',
 *         focus: 'var(--cs-color-focus)',
 *       },
 *     },
 *     borderRadius: {
 *       'cs-sm': 'var(--cs-radius-sm)',
 *       'cs-md': 'var(--cs-radius-md)',
 *       'cs-lg': 'var(--cs-radius-lg)',
 *     },
 *     maxWidth: { 'cs-container': 'var(--cs-container)' },
 *   },
 * }
 */