/* =========================================================================
   Coalfield Resources — Design Tokens
   Industrial Precision design system
   ========================================================================= */

:root {
	/* ---------- Core surfaces ---------- */
	--cr-surface: #0a1422;
	--cr-surface-dim: #0a1422;
	--cr-surface-bright: #303a49;
	--cr-surface-container-lowest: #050e1c;
	--cr-surface-container-low: #121c2a;
	--cr-surface-container: #16202e;
	--cr-surface-container-high: #212a39;
	--cr-surface-container-highest: #2c3545;

	/* ---------- Industrial named tokens ---------- */
	--cr-coal-black: #111827;
	--cr-steel-gray: #334155;
	--cr-industrial-gray: #F3F4F6;
	--cr-safety-amber: #D97706;
	--cr-safety-amber-bright: #F59E0B;
	--cr-safety-amber-dim: #B45309;
	--cr-border-muted: #1E293B;

	/* ---------- Text ---------- */
	--cr-text: #d9e3f7;
	--cr-on-surface: #d9e3f7;
	--cr-text-muted: #dbc2b0;
	--cr-on-surface-variant: #dbc2b0;
	--cr-text-dim: #94a3b8;
	--cr-text-inverse: #0a1422;

	/* ---------- Brand accents (mapped from DESIGN.md material tokens) ---------- */
	--cr-primary: #ffb77d;
	--cr-on-primary: #4d2600;
	--cr-primary-container: #d97707;
	--cr-on-primary-container: #432100;
	--cr-secondary: #b9c7e0;
	--cr-tertiary: #96ccff;
	--cr-on-tertiary: #003353;

	/* ---------- Status colors ---------- */
	--cr-status-ok: #22C55E;       /* Machine Green */
	--cr-status-warn: #D97706;     /* Safety Amber */
	--cr-status-error: #EF4444;    /* Shutdown Red */
	--cr-status-info: #96ccff;

	/* ---------- Outlines & borders ---------- */
	--cr-outline: #a38c7c;
	--cr-outline-variant: #554336;
	--cr-border: #334155;
	--cr-border-strong: #475569;

	/* ---------- Typography ---------- */
	--cr-font-display: "Hanken Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cr-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cr-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* Display sizes */
	--cr-fs-display-lg: 48px;
	--cr-fs-headline-lg: 32px;
	--cr-fs-headline-md: 24px;
	--cr-fs-headline-sm: 20px;
	--cr-fs-body-lg: 18px;
	--cr-fs-body-md: 16px;
	--cr-fs-body-sm: 14px;
	--cr-fs-data-mono: 14px;
	--cr-fs-label-caps: 12px;

	--cr-lh-tight: 1.1;
	--cr-lh-snug: 1.2;
	--cr-lh-normal: 1.5;
	--cr-lh-relaxed: 1.6;

	--cr-tracking-tight: -0.02em;
	--cr-tracking-snug: -0.01em;
	--cr-tracking-normal: 0;
	--cr-tracking-wide: 0.1em;

	--cr-fw-regular: 400;
	--cr-fw-medium: 500;
	--cr-fw-semibold: 600;
	--cr-fw-bold: 700;
	--cr-fw-black: 800;

	/* ---------- Spacing scale (8px base) ---------- */
	--cr-space-1: 4px;
	--cr-space-2: 8px;
	--cr-space-3: 12px;
	--cr-space-4: 16px;
	--cr-space-5: 20px;
	--cr-space-6: 24px;
	--cr-space-8: 32px;
	--cr-space-10: 40px;
	--cr-space-12: 48px;
	--cr-space-16: 64px;
	--cr-space-20: 80px;
	--cr-space-24: 96px;

	/* ---------- Layout ---------- */
	--cr-container-max: 1440px;
	--cr-container-content: 1200px;
	--cr-gutter: 24px;
	--cr-margin-mobile: 16px;
	--cr-margin-tablet: 24px;
	--cr-margin-desktop: 40px;

	/* ---------- Radius ---------- */
	--cr-radius-sm: 0.125rem;
	--cr-radius: 0.25rem;
	--cr-radius-md: 0.375rem;
	--cr-radius-lg: 0.5rem;
	--cr-radius-xl: 0.75rem;
	--cr-radius-full: 9999px;

	/* ---------- Depth & effects ---------- */
	--cr-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
	--cr-shadow: 0 4px 12px rgba(0,0,0,.5);
	--cr-shadow-lg: 0 8px 24px rgba(0,0,0,.6);
	--cr-glow-amber: 0 0 0 1px var(--cr-safety-amber), 0 0 12px rgba(217, 119, 6, 0.35);
	--cr-glow-amber-tight: 0 0 0 1px var(--cr-safety-amber-bright);

	/* ---------- Header ---------- */
	--cr-header-height: 72px;
	--cr-header-height-mobile: 64px;

	/* ---------- Z-index ---------- */
	--cr-z-header: 100;
	--cr-z-mobile-nav: 200;
	--cr-z-modal: 300;

	/* ---------- Transitions ---------- */
	--cr-transition-fast: 120ms ease;
	--cr-transition: 200ms ease;
	--cr-transition-slow: 320ms ease;
}