/* Design token layer
   Single design system under --app-*. The retro arcade aesthetic is the
   design language for the entire app — chrome and game stage alike.
   Three layers: primitives → semantics → components.
   Component tokens live in their own theme files (static/js/**/
theme/*.js).
*/

/* ============================================================
   1. Primitives — raw values, no intent
   ============================================================ */

:root {
	/* ---- Greens ---- */
	--app-green: #40ff40;
	--app-green-light: #80ff80;
	--app-green-muted: #80c080;
	--app-green-soft: #c0ffc0;

	/* ---- Reds ---- */
	--app-red: #ff4040;
	--app-red-mid: #e84040;
	--app-red-light: #ff6060;
	--app-red-dark: #802020;
	--app-red-glow: rgba(255, 0, 0, 0.5);
	--app-red-glow-strong: rgba(255, 0, 0, 0.7);

	/* ---- Accents ---- */
	--app-yellow: #ffcc00;
	--app-orange: #ff8800;
	--app-orange-dark: #ff6600;
	--app-blue: #40a0ff;
	--app-blue-light: #80d0ff;
	--app-teal: #4ecca3;

	/* ---- Neutrals ---- */
	--app-white: #ffffff;
	--app-black: #000000;
	--app-near-black: #0a0a0a;
	--app-near-white: #f8f9fa;
	--app-ink: #1a1a2e;
	--app-silver: #c0c0c0;
	--app-dim: #666;
	--app-gray: #606060;
	--app-gray-dark: #404040;
	--app-gray-mid: #888;
	--app-gray-light: #e0e0e0;
	--app-gray-pale: #f4f4f4;
	--app-gray-rule: #ccc;
	--app-charcoal: #333;

	/* ---- Battery guns ---- */
	--app-green-gun: #40c040;
	--app-yellow-gun: #c0c040;
	--app-red-gun: #c04040;

	/* ---- Spacing scale ---- */
	--app-1: 4px;
	--app-2: 8px;
	--app-3: 12px;
	--app-4: 16px;
	--app-5: 20px;
	--app-6: 24px;
	--app-7: 32px;
	--app-8: 40px;

	/* ---- Size scale ---- */
	--app-text-xs: 11px;
	--app-text-sm: 13px;
	--app-text-md: 16px;
	--app-text-lg: 20px;
	--app-text-xl: 28px;

	/* ---- Radii ---- */
	--app-radius-sm: 4px;
	--app-radius-md: 8px;
}

/* ============================================================
   2. Semantic tokens — intent-driven, reference primitives
   ============================================================ */

:root {
	/* ---- Color roles ---- */

	--app-color-primary: var(--app-green);
	--app-color-primary-light: var(--app-green-light);
	--app-color-primary-muted: var(--app-green-muted);
	--app-color-primary-contrast: var(--app-black);

	--app-color-secondary: var(--app-yellow);
	--app-color-secondary-light: var(--app-yellow);
	--app-color-secondary-muted: var(--app-green-muted);
	--app-color-secondary-contrast: var(--app-black);

	--app-color-danger: var(--app-red);
	--app-color-danger-light: var(--app-red-light);
	--app-color-danger-muted: var(--app-red-dark);
	--app-color-danger-contrast: var(--app-white);

	--app-color-warning: var(--app-orange);
	--app-color-warning-light: var(--app-orange);
	--app-color-warning-muted: var(--app-orange-dark);
	--app-color-warning-contrast: var(--app-black);

	--app-color-info: var(--app-blue);
	--app-color-info-light: var(--app-blue-light);
	--app-color-info-muted: var(--app-blue);
	--app-color-info-contrast: var(--app-black);

	--app-color-success: var(--app-teal);
	--app-color-success-light: var(--app-teal);
	--app-color-success-muted: var(--app-teal);
	--app-color-success-contrast: var(--app-black);

	/* ---- Surface roles ---- */

	--app-bg: var(--app-near-black);
	--app-bg-overlay: color-mix(in srgb, var(--app-black) 80%, transparent);
	--app-bg-overlay-mid: color-mix(in srgb, var(--app-black) 70%, transparent);
	--app-bg-overlay-light: color-mix(in srgb, var(--app-black) 50%, transparent);
	--app-text: var(--app-gray-light);
	--app-text-muted: var(--app-silver);
	--app-text-on-color: var(--app-white);

	/* ---- Border & overlay roles ---- */

	--app-border: color-mix(in srgb, var(--app-white) 20%, transparent);
	--app-border-light: color-mix(in srgb, var(--app-white) 8%, transparent);
	--app-border-subtle: color-mix(in srgb, var(--app-white) 6%, transparent);
	--app-overlay: color-mix(in srgb, var(--app-white) 40%, transparent);
	--app-overlay-light: color-mix(in srgb, var(--app-white) 30%, transparent);

	/* ---- Shadow roles ---- */

	--app-shadow-drop: color-mix(in srgb, var(--app-black) 40%, transparent);
	--app-shadow-text: color-mix(in srgb, var(--app-black) 60%, transparent);
	--app-shadow-text-light: color-mix(
		in srgb,
		var(--app-black) 40%,
		transparent
	);

	/* ---- Typography ---- */

	--app-font-primary: 'Press Start 2P', monospace;
	--app-font-primary-en: 'Press Start 2P', monospace;
	--app-font-secondary: 'Exo 2', sans-serif;
	--app-font-mono: monospace;
	--app-font-primary-scale: 0.55;

	--app-font-xs: var(--app-text-xs);
	--app-font-sm: var(--app-text-sm);
	--app-font-md: var(--app-text-md);
	--app-font-lg: var(--app-text-lg);
	--app-font-xl: var(--app-text-xl);

	/* ---- Spacing ---- */

	--app-space-xs: var(--app-1);
	--app-space-sm: var(--app-2);
	--app-space-md: var(--app-3);
	--app-space-lg: var(--app-4);
	--app-space-xl: var(--app-6);

	/* ---- Radii ---- */

	--app-radius: var(--app-radius-sm);
	--app-radius-lg: var(--app-radius-md);
}

/* ============================================================
   3. Component tokens — scoped defaults for shared components
   ============================================================ */

:root {
	/* ---- Chrome (top bar, bottom bar) ---- */
	--app-topbar-height: 62px;
	--app-topbar-bg: var(--app-bg-overlay-light);
	--app-topbar-border: color-mix(in srgb, var(--app-white) 10%, transparent);

	/* ---- Leaflet map controls (always light) ---- */
	--app-leaflet-control-color: var(--app-charcoal);
	--app-leaflet-control-bg: var(--app-white);
	--app-leaflet-control-bg-hover: var(--app-gray-pale);
	--app-leaflet-control-border: var(--app-gray-rule);

	/* ---- Shoelace mapping ---- */
	--sl-color-primary-600: var(--app-color-info);
	--sl-color-success-600: var(--app-color-success);
	--sl-color-warning-600: var(--app-color-warning);
	--sl-color-danger-600: var(--app-color-danger);
	--sl-color-neutral-0: var(--app-bg);
	--sl-color-neutral-1000: var(--app-text);
	--sl-font-sans: var(--app-font-secondary);
	--sl-spacing-small: var(--app-space-sm);
	--sl-spacing-medium: var(--app-space-md);
	--sl-spacing-large: var(--app-space-lg);
}

/* ============================================================
   4. Light mode overrides (surfaces only — palette stays intact)
   ============================================================ */

[data-theme='light'] {
	--app-bg: var(--app-near-white);
	--app-bg-overlay: color-mix(in srgb, var(--app-white) 90%, transparent);
	--app-bg-overlay-mid: color-mix(in srgb, var(--app-white) 80%, transparent);
	--app-bg-overlay-light: color-mix(in srgb, var(--app-white) 50%, transparent);
	--app-text: var(--app-ink);
	--app-text-muted: var(--app-dim);

	--app-border: color-mix(in srgb, var(--app-black) 15%, transparent);
	--app-border-light: color-mix(in srgb, var(--app-black) 8%, transparent);
	--app-border-subtle: color-mix(in srgb, var(--app-black) 4%, transparent);
	--app-overlay: color-mix(in srgb, var(--app-black) 20%, transparent);
	--app-overlay-light: color-mix(in srgb, var(--app-black) 10%, transparent);

	--app-topbar-bg: var(--app-bg-overlay-light);
	--app-topbar-border: color-mix(in srgb, var(--app-black) 10%, transparent);
}

/* ============================================================
   5. Responsive & locale overrides
   ============================================================ */

@media (max-width: 480px) {
	:root {
		--app-topbar-height: 42px;
	}
}

:root[dir='rtl'] {
	--app-font-primary: 'Heebo', sans-serif;
	--app-font-secondary: 'Heebo', sans-serif;
	--app-font-primary-scale: 0.85;

	--app-font-xs: 12px;
	--app-font-sm: 14px;
	--app-font-md: 17px;
	--app-font-lg: 22px;
	--app-font-xl: 30px;
}