/* ============================================================ */
/* TOKENS.CSS - Design tokens (single source of truth)			*/
/* v3 - 2026-07												*/
/* ============================================================ */
/* Two-layer system (STRICT since v3):							*/
/*	 LAYER 1 (primitives): raw palette values. Every hex/rgb	*/
/*	   literal in this file lives HERE and nowhere else.		*/
/*	   NEVER referenced by components or other CSS files.		*/
/*	   Every primitive must have at least one Layer 2 client.	*/
/*	 LAYER 2 (semantic): role-based tokens. References Layer 1	*/
/*	   (or composes channels with rgba()). This is the ONLY		*/
/*	   layer components and CSS files may reference.			*/
/*																*/
/* GOLDEN RULE: no color literal (#xxx, rgb, rgba) outside this */
/* file. Applies to all styles/*.css and all static #styles in	*/
/* JS View classes.												*/
/*																*/
/* Load order: this file MUST be linked BEFORE main.css.		*/
/*																*/
/* Scope boundary: game-domain colors (resources, players,		*/
/* protection levels) live in Constants.js, not here. This file */
/* owns interface design only. The --resource-* semantic tokens */
/* below are the CSS-side mirror of that game palette.			*/
/* ============================================================ */

:root {

	/* ======================================================== */
	/* LAYER 1 - PRIMITIVES (do not use outside this file)		*/
	/* ======================================================== */

	/* --- Neutrals --- */
	--white: #faf6f1;
	--white-rgb: 250, 246, 241;	/* channels for rgba() composition */
	--black: #000000;
	--black-rgb: 0, 0, 0;		/* channels for shadows/overlays */
	--gray-50: #f3eee6;
	--gray-100: #eae4da;
	--gray-150: #e5dfd5;
	--gray-200: #d6cfc3;
	--gray-300: #c0b7a7;
	--gray-400: #a09688;
	--gray-500: #857a6c;

	--gray-600: #65594c;
	--gray-800: #3a322a;
	/* Cool-toned gray (Bootstrap secondary), kept out of the	 */
	/* neutral scale on purpose: different hue.					 */
	--gray-cool-500: #756a5e;

	/* --- Blues --- */
	--blue-100: #e8e8f8;		/* zone heaven tint, active */
	--blue-royal: #4169E1;
	--blue-azure: #3498db;
	--blue-slate: #4a6b8a;

	/* --- Greens --- */
	--green-100: #e8f8e8;		/* zone earth tint, active */
	--green-150: #d4edda;		/* success surface */
	--green-200: #c3e6cb;		/* success border */
	--green-mint: #c8f5c8;		/* vivid mint, NOT merged into the	*/
								/* tint scale: feedback hue carries	*/
								/* meaning (selected surfaces)		*/
	--green-400: #88cc88;
	--green-500: #28a745;
	--green-900: #155724;
	--green-forest: #228B22;
	--green-moss: #6f8f5a;
	--teal-500: #20c997;

	/* --- Reds --- */
	--red-100: #f8e8e8;			/* zone hell tint, active */
	--red-150: #f8d7da;			/* error surface */
	--red-200: #f5c6cb;			/* error border */
	--red-400: #ff6666;
	--red-500: #dc3545;
	--red-900: #721c24;
	--red-dark: #8B0000;
	--red-clay: #a8553f;

	/* --- Oranges / ambers / golds / yellows --- */
	--orange-400: #ffa500;
	--orange-600: #ee6633;
	--amber-400: #fbbf24;
	--amber-600: #dd9900;
	--yellow-500: #efe700;
	--gold-400: #d4af37;
	--gold-400-rgb: 212, 175, 55;
	--gold-600: #b8941f;
	--slate-800: #352d25;

	/* --- Browns (deck material + NC low tier) --- */
	--chocolate-400: #D2691E;
	--brown-400: #A0522D;
	--brown-500: #8B4513;
	--brown-700: #654321;

	/* --- Purples / indigos --- */
	--purple-500: #667eea;
	--purple-600: #5a6fd8;
	--purple-700: #764ba2;
	--purple-800: #4a3870;
	--purple-900: #3a2c59;
	--purple-nc: #9370DB;
	--plum-300: #DDA0DD;
	--indigo-500: #5533ff;
	--indigo-700: #2200aa;
	--indigo-900: #110044;

	/* --- Rich zone palette (identity hues, never snapped) --- */
	--hell-red: #c44536;
	--hell-red-deep: #8B2500;
	--earth-green: #4a9d5f;
	--earth-green-deep: #2d6e3f;
	--heaven-cyan: #5fb3d4;
	--heaven-cyan-deep: #3d8eb0;

	/* ======================================================== */
	/* LAYER 2 - SEMANTIC TOKENS (use these in components)		*/
	/* ======================================================== */

	/* --- Text and surfaces --- */
	--text-color: var(--slate-800);
	--text-secondary: var(--gray-600);
	--text-tertiary: var(--gray-500);
	--text-inverse: var(--white);
	--surface: var(--white);
	--surface-rgb: var(--white-rgb);	/* for translucent surfaces: rgba(var(--surface-rgb), 0.9) */
	--bg-light: var(--gray-50);
	--bg-board: var(--gray-100);
	--border-color: var(--gray-200);
	--border-medium: var(--gray-300);
	--border-strong: var(--gray-800);

	/* Muted surfaces (tabs at rest, hover, pressed states) */
	--surface-muted: var(--gray-100);
	--surface-muted-hover: var(--gray-150);
	--surface-pressed: var(--gray-150);

	/* Progress track surfaces */
	--track-bg: rgba(var(--black-rgb), 0.12);
	--track-marker: rgba(var(--black-rgb), 0.4);

	/* --- Brand / primary actions (config screens) --- */
	--primary-color: var(--purple-800);
	--primary-color-hover: var(--purple-900);
	--secondary-color: var(--purple-700);
	--brand-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);

	/* --- Disabled state (buttons, empty text) --- */
	--action-disabled-bg: var(--gray-300);
	--text-disabled: var(--gray-300);
	--opacity-disabled: 0.45;

	/* --- In-game confirm action (validate button) --- */
	--action-confirm-bg: var(--gold-400);
	--action-confirm-bg-hover: var(--gold-600);
	--action-confirm-text: var(--slate-800);

	/* --- Start-game action (config page launch button) --- */
	--action-start-gradient: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
	--action-start-glow: rgba(var(--gold-400-rgb), 0.4);

	/* --- FX: interactive highlight ("click me" affordance) --- */
	/* Changing the highlight hue = change these 3 lines only.	*/
	--fx-highlight-color: var(--gold-400);
	--fx-highlight-color-strong: var(--gold-600);
	--fx-highlight-rgb: var(--gold-400-rgb);
	/* Ready-made alphas; for other alphas compose with:		*/
	/*	 rgba(var(--fx-highlight-rgb), 0.6)						*/
	--fx-highlight-glow: rgba(var(--fx-highlight-rgb), 0.7);
	--fx-highlight-glow-strong: rgba(var(--fx-highlight-rgb), 0.9);
	--fx-highlight-tint: rgba(var(--fx-highlight-rgb), 0.2);

	/* --- Focus ring (keyboard accessibility) --- */
	/* Clients: :focus-visible rules on buttons (config, game). */
	--focus-ring: 0 0 0 3px var(--fx-highlight-tint);

	/* --- FX: value change feedback --- */
	--feedback-positive: var(--green-500);
	--feedback-negative: var(--red-500);
	--feedback-positive-tint: var(--green-mint);	/* confirmed/selected surfaces */

	/* --- Status message blocks (config page) --- */
	--msg-success-text: var(--green-900);
	--msg-success-bg: var(--green-150);
	--msg-success-border: var(--green-200);
	--msg-error-text: var(--red-900);
	--msg-error-bg: var(--red-150);
	--msg-error-border: var(--red-200);

	/* --- Zones: card faces (borders + pastel backgrounds) --- */
	--zone-hell-border: var(--red-dark);
	--zone-earth-border: var(--green-forest);
	--zone-heaven-border: var(--blue-royal);
	--zone-hell-bg: var(--red-100);
	--zone-earth-bg: var(--green-100);
	--zone-heaven-bg: var(--blue-100);

	/* --- Zones: hex tile borders (board, shared by				*/
	/*	   HexLayerView + BoardControlsView mini hex icons)			*/
	--hex-border-hell: var(--black);
	--hex-border-earth: var(--black);
	--hex-border-heaven: var(--black);
	--hex-border-default: var(--black);

	/* Sketchy hex wobble (0 = geometric, 2+ = hand-drawn) */
	--hex-wobble: 0;

	/* --- Zones: board zone circles (background halos) --- */
	--zone-circle-hell: var(--gray-600);
	--zone-circle-earth: var(--gray-500);
	--zone-circle-heaven: var(--gray-400);

	/* --- Zones: rich variant (phantom gradients, future art) --- */
	--zone-hell-rich: var(--hell-red);
	--zone-hell-rich-deep: var(--hell-red-deep);
	--zone-earth-rich: var(--earth-green);
	--zone-earth-rich-deep: var(--earth-green-deep);
	--zone-heaven-rich: var(--heaven-cyan);
	--zone-heaven-rich-deep: var(--heaven-cyan-deep);

	/* --- NC rank tiers (card cost groups 1-3 / 4-6 / 7-9) --- */
	--nc-low-accent: var(--brown-500);
	--nc-low-gradient: linear-gradient(135deg, var(--brown-500), var(--chocolate-400));
	--nc-mid-accent: var(--gold-400);
	--nc-mid-gradient: linear-gradient(135deg, var(--gold-400), var(--orange-400));
	--nc-high-accent: var(--purple-nc);
	--nc-high-gradient: linear-gradient(135deg, var(--purple-nc), var(--plum-300));

	/* --- Deck material --- */
	--deck-bg-start: var(--brown-500);
	--deck-bg-end: var(--brown-400);
	--deck-border: var(--brown-700);
	/* Shared by DeckView stack and CardOverlayView phantom back */
	--deck-gradient: linear-gradient(45deg, var(--deck-bg-start), var(--deck-bg-end));

	/* --- Accents --- */
	--accent-gold: var(--gold-400);

	/* --- Gauge instruments (GreatBalance, RV, VCI, Liquid) --- */
	--gauge-ink: var(--gray-800);	/* strokes, needles, value text */
	--gauge-frame: var(--gray-500);	/* metal contour fill */
	/* RV zone arcs (danger indicator: low / optimal / high) */
	--gauge-rv-low: var(--orange-600);
	--gauge-rv-low-end: var(--amber-400);
	--gauge-rv-optimal: var(--earth-green);
	--gauge-rv-optimal-end: var(--green-400);
	--gauge-rv-high: var(--hell-red);
	--gauge-rv-high-end: var(--red-400);
	/* VCI gauge presentation */
	--gauge-vci-empty: var(--gray-150);
	--gauge-vci-threshold: var(--blue-royal);
	/* Liquid gauge presentation */
	--gauge-liquid-graduation: var(--purple-500);
	--gauge-liquid-frame-bg: linear-gradient(180deg, var(--surface) 0%, var(--gray-150) 100%);

	/* --- Resource identity (game palette, also in Constants.js) --- */
	/* VCI (soul qualities) */
	--resource-v: var(--red-clay);
	--resource-c: var(--green-moss);
	--resource-i: var(--blue-slate);
	/* JS (karma) - base/fill for liquid gradient, border for frame */
	--resource-j-base: var(--orange-400);
	--resource-j-fill: var(--yellow-500);
	--resource-j-border: var(--amber-600);
	--resource-s-base: var(--indigo-900);
	--resource-s-fill: var(--indigo-500);
	--resource-s-border: var(--indigo-700);
	/* R (vital resource) */
	--resource-r: var(--purple-nc);

	/* --- Shadows and overlays (elevation scale) --- */
	--shadow-color: rgba(var(--black-rgb), 0.3);	/* for custom composed shadows */
	--shadow-color-strong: rgba(var(--black-rgb), 0.6);
	--shadow-card: 0 5px 8px rgba(var(--black-rgb), 0.7);	/* dramatic card elevation */
	--box-shadow-sm: 0 1px 3px rgba(var(--black-rgb), 0.12);
	--box-shadow-md: 0 4px 12px rgba(var(--black-rgb), 0.25);
	--box-shadow-lg: 0 12px 40px rgba(var(--black-rgb), 0.5);
	--box-shadow-phantom: 4px 4px 16px rgba(var(--black-rgb), 0.3);
	--backdrop-color: rgba(var(--black-rgb), 0.5);

	--shadow-offset-sm: 1px;		/* for svg clone shadows */
	--shadow-offset-md: 2px;		/* for svg clone shadows */
	/* SVG soft shadows (CSS filter, follows alpha shape).			*/
	--shadow-drop-sm: drop-shadow(1px 1px 2px var(--shadow-color));
	--shadow-drop-md: drop-shadow(2px 2px 3px var(--shadow-color));

	/* --- Motion --- */
	--duration-fast: 0.2s;
	--duration-base: 0.3s;
	--duration-slow: 0.5s;
	--fx-pulse-duration: 1s;
	--fx-pulse-scale: 1.1;	/* overridable per component */

	/* ======================================================== */
	/* LAYOUT AND SIZING TOKENS									*/
	/* ======================================================== */

	/* Board element dimensions.
	   Driver: --board-min-side, published by BoardView's ResizeObserver.
	   Fallback (viewport) applies before the first measure only.
	   - Ratios and bounds are design decisions: they live HERE, not in JS.
	   - SVG geometry constants (hex inradius, size ratios, camera spans)
	     live in Constants.js UI_CONFIG — they feed JS math, not CSS.      */

	--board-min-side: 100vmin;
	--action-icon-size:clamp(30px, var(--board-min-side) * 0.1, 84px);
	--dice-size: calc(var(--action-icon-size) * 0.9);
	--deck-width: calc(var(--action-icon-size) * 1.0);
	--great-balance-width: clamp(70px, var(--board-min-side) * 0.30, 180px);

	/* Gauge dimensions */
	--board-player-panel-size: 300px;
	--gauge-vci-size: calc(var(--board-player-panel-size) * 0.28);
	--gauge-js-width: calc(var(--board-player-panel-size) * 0.09);
	--gauge-js-height: calc(var(--board-player-panel-size) * 0.18);
	--gauge-rv-width: calc(var(--board-player-panel-size) * 0.28);

	/* Typography - families */
	--font-family-base: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
	--font-family-mono: 'Courier New', monospace;
	--font-family-sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	--font-family-display: 'Cinzel', Georgia, serif;

	/* Typography - numeric variants */
	--font-variant-oldstyle: oldstyle-nums;
	--font-variant-tabular: tabular-nums lining-nums;

	/* Typography - spacing */
	--letter-spacing-wide: 0.05em;

	/* Typography - weights */
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;	/* 'bold' keyword equivalent */

	/* Typography - sizes */
	--font-2xs: 0.625rem;	/* 10px */
	--font-xs: 0.75rem;		/* 12px */
	--font-sm: 0.875rem;	/* 14px */
	--font-md: 1rem;		/* 16px */
	--font-lg: 1.25rem;		/* 20px */
	--font-xl: 1.5rem;		/* 24px */

	/* Spacing */
	--space-xs: 0.25rem;	/* 4px */
	--space-sm: 0.5rem;		/* 8px */
	--space-md: 0.75rem;	/* 12px */
	--space-lg: 1rem;		/* 16px */
	--space-xl: 1.25rem;	/* 20px */

	/* Border widths */
	--border-w-hair: 0.3px;		/* hairline: intentionally sub-pixel */
	--border-w-xthin: 0.5px;
	--border-w-thin: 1px;
	--border-w-base: 2px;
	--border-w-thick: 3px;
	--border-w-heavy: 4px;

	/* Radius */
	--radius-xs: 0.125rem;	/* 2px */
	--radius-sm: 0.25rem;	/* 4px */
	--radius-md: 0.5rem;	/* 8px */
	--radius-lg: 0.625rem;	/* 10px - card containers, panels */
	--radius-full: 999px;	/* pills (player name/mode badges) */

	/* Z-index scale - ALWAYS use these, never literal values.	*/
	/* Gaps left on purpose for future layers.					*/
	--z-base: 1;
	--z-raised: 10;			/* elements above board surface */
	--z-overlay: 1000;		/* card overlay, modals */
	--z-overlay-top: 1010;	/* phantom card above overlay */
	--z-notification: 1500;	/* toasts, above modals */
	--z-devtools: 2000;		/* dev drawer, above everything */

}