/* Schniffel — "Cozy Tabletop" Design Tokens
 * Warm tabletop felt aesthetic for a casual dice-and-card game night.
 * See docs/game-design-document.md §12 for the source palette. */

:root {
	/* ── Brand / accent colors ─────────────────────────────── */
	--eg-color-primary: #f4a261; /* Warm Gold */
	--eg-color-primary-light: #f6bc8e;
	--eg-color-primary-rgb:
		244, 162, 97; /* Warm Gold as comma-separated RGB for rgba() use */
	--eg-color-secondary: #e76f51; /* Terracotta */
	--eg-color-secondary-light: #ed9078;
	--eg-color-tertiary: #95d5b2; /* Sage */
	--eg-color-success: #52b788; /* fresh green */
	--eg-color-error: #e63946; /* warm red */
	--eg-color-warning: #e76f51; /* Terracotta */
	--eg-color-info: #4895ef; /* blue */

	/* ── Typography ─────────────────────────────────────────── */
	--eg-font-heading: "Fredoka", "Segoe UI", system-ui, sans-serif;
	--eg-font-body: "Nunito", "Segoe UI", system-ui, Roboto, sans-serif;
	--eg-font-numbers: "Nunito", "Consolas", monospace;

	--eg-font-display: 2rem;
	--eg-font-title: 1.5rem;
	--eg-font-subtitle: 1.25rem;
	--eg-font-body: 1rem;
	--eg-font-caption: 0.875rem;
	--eg-font-small: 0.75rem;
	--eg-font-metric: 3rem;

	/* ── Spacing ────────────────────────────────────────────── */
	--eg-spacing-xs: 0.25rem;
	--eg-spacing-sm: 0.5rem;
	--eg-spacing-md: 1rem;
	--eg-spacing-lg: 1.5rem;
	--eg-spacing-xl: 2rem;

	/* ── Radius ─────────────────────────────────────────────── */
	--eg-radius-sm: 4px;
	--eg-radius-md: 8px;
	--eg-radius-lg: 12px;
	--eg-radius-xl: 16px;
	--eg-radius-pill: 9999px;

	/* ── Shadows ────────────────────────────────────────────── */
	--eg-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
	--eg-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.35);
	--eg-shadow-glow-primary: 0 0 20px rgba(var(--eg-color-primary-rgb), 0.35);
	--eg-shadow-glow-success: 0 0 20px rgba(82, 183, 136, 0.3);

	/* ── Motion ────────────────────────────────────────────── */
	--eg-transition-fast: 150ms ease;
	--eg-transition-medium: 300ms ease;
	--eg-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ── Layout ─────────────────────────────────────────────── */
	--eg-bottom-nav-height: 80px;
	--eg-safe-area-bottom: env(safe-area-inset-bottom, 0px);
	--eg-safe-area-top: env(safe-area-inset-top, 0px);
	--eg-touch-min: 44px; /* minimum touch target height (mobile accessibility) */

	/* ── Palette — Cozy Tabletop (dark felt base) ────────────
	 * background   = Felt Green  (table surface / main game area)
	 * surface      = Dark Felt   (panels, tabs, expansion, pickers)
	 * surface-accent = deepest felt (inputs, pickers, snackbars)
	 * Cards use Cream with charcoal text (see eg-components.css .eg-card).
	 */
	--eg-palette-background: #2d6a4f; /* Felt Green */
	--eg-palette-surface: #1b4332; /* Dark Felt */
	--eg-palette-surface-accent: #14352a; /* Deepest felt */
	--eg-palette-text-primary: #f8f9fa; /* Off-White (on felt) */
	--eg-palette-text-secondary: #95d5b2; /* Sage (muted) */
	--eg-palette-text-disabled: #7ba690; /* dim sage */
	--eg-palette-divider: #40916c; /* lighter felt line */
	--eg-palette-divider-light: #52b788;
	--eg-palette-primary: #f4a261; /* Warm Gold */
	--eg-palette-secondary: #e76f51; /* Terracotta */
	--eg-palette-tertiary: #95d5b2; /* Sage */
	--eg-palette-error: #e63946;
	--eg-palette-success: #52b788;
	--eg-palette-warning: #e76f51;
	--eg-palette-info: #4895ef;

	/* Text on filled accent backgrounds (used by EgColor.ToFgVar) */
	--eg-palette-on-primary: #2b2d42; /* charcoal on gold */
	--eg-palette-on-secondary: #fff8e7; /* cream on terracotta */
	--eg-palette-on-tertiary: #1b4332; /* dark felt on sage */
	--eg-palette-on-error: #fff8e7;
	--eg-palette-on-success: #1b4332;
	--eg-palette-on-warning: #fff8e7;
	--eg-palette-on-info: #fff8e7;

	/* Cards — cream surface with charcoal text */
	--eg-palette-card: #fff8e7; /* Cream */
	--eg-palette-text-on-card: #2b2d42; /* Soft Charcoal */
	--eg-palette-text-on-card-muted: #6b6e7f;

	/* ── Player colors (inventory borders, avatars, claimed-card glow) ── */
	--eg-player-1: #4895ef; /* blue */
	--eg-player-2: #f77f00; /* orange */
	--eg-player-3: #9d4edd; /* purple */
	--eg-player-4: #06a77d; /* teal */
	--eg-player-5: #e5383b; /* pink */
	--eg-player-6: #80b918; /* lime */
	--eg-player-7: #00b4d8; /* cyan */
	--eg-player-8: #ffb703; /* amber */
}