/**
 * BuddyX Child Theme - Site Colors Token Layer
 *
 * This file maps the base --site-* CSS variables to:
 * 1. --bx-color-* tokens (new BuddyX 5.2+ color system)
 * 2. --color-* variables (legacy compatibility)
 * 3. --global-* variables (legacy compatibility)
 *
 * These variables are automatically derived from the --site-* base palette.
 * The --site-* variables should be defined in Additional CSS or via a preset CSS file.
 *
 * ARCHITECTURE:
 * 1. Base palette: --site-* CSS variables (defined elsewhere - presets or Additional CSS)
 * 2. Token layer: --bx-color-* variables derived from --site-* (this file)
 * 3. Benefit: Admins can change --site-* colors and have them cascade automatically
 *
 * @package BuddyX_Child
 * @since 1.0.0
 */

/* Light Mode (default) - Token Layer Mappings */
:root {
	/* Brand / Accent - derived from site palette */
	--bx-color-accent: var(--site-accent, #ef5455);
	--bx-color-accent-secondary: var(--site-accent-secondary, #f97316);

	/* Buttons */
	--bx-color-button-bg: var(--site-accent, #ef5455);
	--bx-color-button-bg-hover: var(--site-accent-hover, #d62828);
	--bx-color-button-fg: var(--site-button-text, #fafafa);
	--bx-color-button-fg-hover: var(--site-button-text-hover, #ffffff);
	--bx-color-button-border: var(--site-accent, #ef5455);
	--bx-color-button-border-hover: var(--site-accent-hover, #d62828);

	/* Surfaces / Backgrounds */
	--bx-color-bg: var(--site-bg-primary, #ffffff);
	--bx-color-bg-page: var(--site-bg-secondary, #f5f5f5);
	--bx-color-bg-elevated: var(--site-bg-elevated, #ffffff);
	--bx-color-bg-muted: var(--site-bg-tertiary, #eeeeee);
	--bx-color-bg-subtle: var(--site-bg-subtle, #f0f0f0);

	/* Text & Foreground */
	--bx-color-fg: var(--site-text-primary, #1a1a1a);
	--bx-color-fg-muted: var(--site-text-muted, #666666);
	--bx-color-fg-subtle: var(--site-text-secondary, #333333);

	/* Header */
	--bx-color-header-bg: var(--site-bg-secondary, #f5f5f5);
	--bx-color-site-title: var(--site-text-primary, #1a1a1a);
	--bx-color-site-title-hover: var(--site-accent, #ef5455);
	--bx-color-site-tagline: var(--site-text-muted, #666666);

	/* Menu */
	--bx-color-menu-fg: var(--site-text-primary, #1a1a1a);
	--bx-color-menu-hover: var(--site-accent, #ef5455);
	--bx-color-menu-active: var(--site-accent, #ef5455);

	/* Subheader */
	--bx-color-subheader-fg: var(--site-text-primary, #1a1a1a);

	/* Links */
	--bx-color-link: var(--site-link, #ef5455);
	--bx-color-link-hover: var(--site-link-hover, #d62828);

	/* Headings */
	--bx-color-h1: var(--site-text-primary, #1a1a1a);
	--bx-color-h2: var(--site-text-primary, #1a1a1a);
	--bx-color-h3: var(--site-text-primary, #1a1a1a);
	--bx-color-h4: var(--site-text-primary, #1a1a1a);
	--bx-color-h5: var(--site-text-primary, #1a1a1a);
	--bx-color-h6: var(--site-text-primary, #1a1a1a);

	/* Footer */
	--bx-color-footer-bg: var(--site-footer-bg, #ffffff);
	--bx-color-footer-title: var(--site-text-primary, #1a1a1a);
	--bx-color-footer-fg: var(--site-footer-text, #333333);
	--bx-color-footer-link: var(--site-footer-link, #ef5455);
	--bx-color-footer-link-hover: var(--site-footer-link-hover, #d62828);

	/* Copyright */
	--bx-color-copyright-bg: var(--site-copyright-bg, #1a1a1a);
	--bx-color-copyright-fg: var(--site-copyright-text, #666666);
	--bx-color-copyright-link: var(--site-copyright-link, #ef5455);
	--bx-color-copyright-link-hover: var(--site-copyright-link-hover, #d62828);
	--bx-color-copyright-border: var(--site-copyright-border, #dddddd);

	/* Borders & Dividers */
	--bx-color-border: var(--site-border, #dddddd);
	--bx-color-border-strong: var(--site-border-strong, #cccccc);
	--bx-color-divider: var(--site-bg-tertiary, #eeeeee);

	/* Forms / Inputs */
	--bx-color-input-bg: var(--site-input-bg, #ffffff);
	--bx-color-input-border: var(--site-input-border, #cccccc);
	--bx-color-input-focus-border: var(--site-accent, #ef5455);
	--bx-color-input-fg: var(--site-text-primary, #1a1a1a);
	--bx-color-input-placeholder: var(--site-text-muted, #666666);

	/* Loader */
	--bx-color-loader-bg: var(--site-accent, #ef5455);

	/* Semantic Colors */
	--bx-color-success: #059669;
	--bx-color-warning: #d97706;
	--bx-color-error: var(--site-accent, #ef5455);
	--bx-color-info: #0891b2;

	/* ═══ LEGACY COMPATIBILITY: --color-* variables ═══ */
	--color-header-bg: var(--bx-color-header-bg);
	--color-site-title: var(--bx-color-site-title);
	--color-site-title-hover: var(--bx-color-site-title-hover);
	--color-site-tagline: var(--bx-color-site-tagline);
	--color-menu: var(--bx-color-menu-fg);
	--color-menu-hover: var(--bx-color-menu-hover);
	--color-menu-active: var(--bx-color-menu-active);
	--color-subheader-title: var(--bx-color-h3);
	--color-link: var(--bx-color-link);
	--color-link-hover: var(--bx-color-link-hover);
	--color-link-active: var(--bx-color-link-hover);
	--color-h1: var(--bx-color-h1);
	--color-h2: var(--bx-color-h2);
	--color-h3: var(--bx-color-h3);
	--color-h4: var(--bx-color-h4);
	--color-h5: var(--bx-color-h5);
	--color-h6: var(--bx-color-h6);
	--color-footer-title: var(--bx-color-footer-title);
	--color-footer-fg: var(--bx-color-footer-fg);
	--color-footer-link: var(--bx-color-footer-link);
	--color-footer-link-hover: var(--bx-color-footer-link-hover);
	--color-copyright-bg: var(--bx-color-copyright-bg);
	--color-copyright-fg: var(--bx-color-copyright-fg);
	--color-copyright-content: var(--bx-color-copyright-fg);
	--color-copyright-link: var(--bx-color-copyright-link);
	--color-copyright-link-hover: var(--bx-color-copyright-link-hover);
	--color-copyright-border: var(--bx-color-copyright-border);
	--color-footer-content: var(--bx-color-footer-fg);
	--color-theme-primary: var(--site-accent, #ef5455);
	--color-theme-body: var(--bx-color-bg);
	--color-theme-white-box: var(--bx-color-bg-elevated);
	--global-body-lightcolor: var(--bx-color-bg-muted);
	--global-border-color: var(--bx-color-border);

	/* ═══ LEGACY COMPATIBILITY: --button-* variables ═══ */
	--button-background-color: var(--bx-color-button-bg);
	--button-background-hover-color: var(--bx-color-button-bg-hover);
	--button-text-color: var(--bx-color-button-fg);
	--button-text-hover-color: var(--bx-color-button-fg-hover);
	--button-border-color: var(--bx-color-button-border);
	--button-border-hover-color: var(--bx-color-button-border-hover);
}

/* Dark Mode - Token Layer Mappings */
:root[data-bx-mode="dark"],
[data-bx-mode="dark"] {
	/* Brand / Accent - brighter for dark contrast */
	--bx-color-accent: var(--site-accent, #ff6b6b);
	--bx-color-accent-secondary: var(--site-accent-secondary, #ffa94d);

	/* Buttons */
	--bx-color-button-bg: var(--site-accent, #ff6b6b);
	--bx-color-button-bg-hover: var(--site-accent-hover, #ff5252);
	--bx-color-button-fg: var(--site-button-text, #1a1a1a);
	--bx-color-button-fg-hover: var(--site-button-text-hover, #000000);
	--bx-color-button-border: var(--site-accent, #ff6b6b);
	--bx-color-button-border-hover: var(--site-accent-hover, #ff5252);

	/* Surfaces / Backgrounds - dark */
	--bx-color-bg: var(--site-bg-primary, #0a0a0a);
	--bx-color-bg-page: var(--site-bg-secondary, #1a1a1a);
	--bx-color-bg-elevated: var(--site-bg-elevated, #262626);
	--bx-color-bg-muted: var(--site-bg-tertiary, #333333);
	--bx-color-bg-subtle: var(--site-bg-subtle, #1f1f1f);

	/* Text & Foreground - light */
	--bx-color-fg: var(--site-text-primary, #fafafa);
	--bx-color-fg-muted: var(--site-text-muted, #999999);
	--bx-color-fg-subtle: var(--site-text-secondary, #d4d4d4);

	/* Header */
	--bx-color-header-bg: var(--site-bg-primary, #0a0a0a);
	--bx-color-site-title: var(--site-text-primary, #fafafa);
	--bx-color-site-title-hover: var(--site-accent, #ff6b6b);
	--bx-color-site-tagline: var(--site-text-muted, #999999);

	/* Menu */
	--bx-color-menu-fg: var(--site-text-secondary, #d4d4d4);
	--bx-color-menu-hover: var(--site-accent, #ff6b6b);
	--bx-color-menu-active: var(--site-accent, #ff6b6b);

	/* Subheader */
	--bx-color-subheader-fg: var(--site-text-primary, #fafafa);

	/* Links - bright for visibility on dark */
	--bx-color-link: var(--site-link, #ff6b6b);
	--bx-color-link-hover: var(--site-link-hover, #ffa5a5);

	/* Headings - light gray/white */
	--bx-color-h1: var(--site-text-primary, #fafafa);
	--bx-color-h2: var(--site-text-primary, #fafafa);
	--bx-color-h3: var(--site-text-primary, #fafafa);
	--bx-color-h4: var(--site-text-primary, #fafafa);
	--bx-color-h5: var(--site-text-primary, #fafafa);
	--bx-color-h6: var(--site-text-primary, #fafafa);

	/* Footer */
	--bx-color-footer-bg: var(--site-footer-bg, #1a1a1a);
	--bx-color-footer-title: var(--site-text-primary, #fafafa);
	--bx-color-footer-fg: var(--site-footer-text, #d4d4d4);
	--bx-color-footer-link: var(--site-footer-link, #ff6b6b);
	--bx-color-footer-link-hover: var(--site-footer-link-hover, #ffa5a5);

	/* Copyright */
	--bx-color-copyright-bg: var(--site-copyright-bg, #0a0a0a);
	--bx-color-copyright-fg: var(--site-copyright-text, #999999);
	--bx-color-copyright-link: var(--site-copyright-link, #ff6b6b);
	--bx-color-copyright-link-hover: var(--site-copyright-link-hover, #ffa5a5);
	--bx-color-copyright-border: var(--site-copyright-border, #404040);

	/* Borders & Dividers */
	--bx-color-border: var(--site-border, #333333);
	--bx-color-border-strong: var(--site-border-strong, #444444);
	--bx-color-divider: var(--site-bg-tertiary, #333333);

	/* Forms / Inputs */
	--bx-color-input-bg: var(--site-input-bg, #1a1a1a);
	--bx-color-input-border: var(--site-input-border, #404040);
	--bx-color-input-focus-border: var(--site-accent, #ff6b6b);
	--bx-color-input-fg: var(--site-text-primary, #fafafa);
	--bx-color-input-placeholder: var(--site-text-muted, #808080);

	/* Loader */
	--bx-color-loader-bg: var(--site-accent, #ff6b6b);

	/* Semantic Colors - brighter for dark contrast */
	--bx-color-success: #4ade80;
	--bx-color-warning: #fbbf24;
	--bx-color-error: #ff6b6b;
	--bx-color-info: #06b6d4;

	/* ═══ LEGACY COMPATIBILITY: --color-* variables (dark mode) ═══ */
	--color-header-bg: var(--bx-color-header-bg);
	--color-site-title: var(--bx-color-site-title);
	--color-site-title-hover: var(--bx-color-site-title-hover);
	--color-site-tagline: var(--bx-color-site-tagline);
	--color-menu: var(--bx-color-menu-fg);
	--color-menu-hover: var(--bx-color-menu-hover);
	--color-menu-active: var(--bx-color-menu-active);
	--color-subheader-title: var(--bx-color-h3);
	--color-link: var(--bx-color-link);
	--color-link-hover: var(--bx-color-link-hover);
	--color-link-active: var(--bx-color-link-hover);
	--color-h1: var(--bx-color-h1);
	--color-h2: var(--bx-color-h2);
	--color-h3: var(--bx-color-h3);
	--color-h4: var(--bx-color-h4);
	--color-h5: var(--bx-color-h5);
	--color-h6: var(--bx-color-h6);
	--color-footer-title: var(--bx-color-footer-title);
	--color-footer-fg: var(--bx-color-footer-fg);
	--color-footer-link: var(--bx-color-footer-link);
	--color-footer-link-hover: var(--bx-color-footer-link-hover);
	--color-copyright-bg: var(--bx-color-copyright-bg);
	--color-copyright-fg: var(--bx-color-copyright-fg);
	--color-copyright-content: var(--bx-color-copyright-fg);
	--color-copyright-link: var(--bx-color-copyright-link);
	--color-copyright-link-hover: var(--bx-color-copyright-link-hover);
	--color-copyright-border: var(--bx-color-copyright-border);
	--color-footer-content: var(--bx-color-footer-fg);
	--color-theme-primary: var(--site-accent);
	--color-theme-body: var(--bx-color-bg);
	--color-theme-white-box: var(--bx-color-bg-elevated);
	--global-body-lightcolor: var(--bx-color-bg-muted);
	--global-border-color: var(--bx-color-border);

	/* ═══ LEGACY COMPATIBILITY: --button-* variables (dark mode) ═══ */
	--button-background-color: var(--bx-color-button-bg);
	--button-background-hover-color: var(--bx-color-button-bg-hover);
	--button-text-color: var(--bx-color-button-fg);
	--button-text-hover-color: var(--bx-color-button-fg-hover);
	--button-border-color: var(--bx-color-button-border);
	--button-border-hover-color: var(--bx-color-button-border-hover);
}

/* System dark mode fallback when BuddyX toggle is not available */
@media (prefers-color-scheme: dark) {
	:root:not([data-bx-mode]) {
		/* Brand / Accent - brighter for dark contrast */
		--bx-color-accent: var(--site-accent, #ff6b6b);
		--bx-color-accent-secondary: var(--site-accent-secondary, #ffa94d);

		/* Buttons */
		--bx-color-button-bg: var(--site-accent, #ff6b6b);
		--bx-color-button-bg-hover: var(--site-accent-hover, #ff5252);
		--bx-color-button-fg: var(--site-button-text, #1a1a1a);
		--bx-color-button-fg-hover: var(--site-button-text-hover, #000000);
		--bx-color-button-border: var(--site-accent, #ff6b6b);
		--bx-color-button-border-hover: var(--site-accent-hover, #ff5252);

		/* Surfaces / Backgrounds - dark */
		--bx-color-bg: var(--site-bg-primary, #0a0a0a);
		--bx-color-bg-page: var(--site-bg-secondary, #1a1a1a);
		--bx-color-bg-elevated: var(--site-bg-elevated, #262626);
		--bx-color-bg-muted: var(--site-bg-tertiary, #333333);
		--bx-color-bg-subtle: var(--site-bg-subtle, #1f1f1f);

		/* Text & Foreground - light */
		--bx-color-fg: var(--site-text-primary, #fafafa);
		--bx-color-fg-muted: var(--site-text-muted, #999999);
		--bx-color-fg-subtle: var(--site-text-secondary, #d4d4d4);

		/* ... (other dark mode variables) ... */
		--bx-color-header-bg: var(--site-bg-primary, #0a0a0a);
		--bx-color-site-title: var(--site-text-primary, #fafafa);
		--bx-color-site-title-hover: var(--site-accent, #ff6b6b);
		--bx-color-site-tagline: var(--site-text-muted, #999999);
		--bx-color-menu-fg: var(--site-text-secondary, #d4d4d4);
		--bx-color-menu-hover: var(--site-accent, #ff6b6b);
		--bx-color-menu-active: var(--site-accent, #ff6b6b);
		--bx-color-subheader-fg: var(--site-text-primary, #fafafa);
		--bx-color-link: var(--site-link, #ff6b6b);
		--bx-color-link-hover: var(--site-link-hover, #ffa5a5);
		--bx-color-h1: var(--site-text-primary, #fafafa);
		--bx-color-h2: var(--site-text-primary, #fafafa);
		--bx-color-h3: var(--site-text-primary, #fafafa);
		--bx-color-h4: var(--site-text-primary, #fafafa);
		--bx-color-h5: var(--site-text-primary, #fafafa);
		--bx-color-h6: var(--site-text-primary, #fafafa);
		--bx-color-footer-bg: var(--site-footer-bg, #1a1a1a);
		--bx-color-footer-title: var(--site-text-primary, #fafafa);
		--bx-color-footer-fg: var(--site-footer-text, #d4d4d4);
		--bx-color-footer-link: var(--site-footer-link, #ff6b6b);
		--bx-color-footer-link-hover: var(--site-footer-link-hover, #ffa5a5);
		--bx-color-copyright-bg: var(--site-copyright-bg, #0a0a0a);
		--bx-color-copyright-fg: var(--site-copyright-text, #999999);
		--bx-color-copyright-link: var(--site-copyright-link, #ff6b6b);
		--bx-color-copyright-link-hover: var(--site-copyright-link-hover, #ffa5a5);
		--bx-color-copyright-border: var(--site-copyright-border, #404040);
		--bx-color-border: var(--site-border, #333333);
		--bx-color-border-strong: var(--site-border-strong, #444444);
		--bx-color-divider: var(--site-bg-tertiary, #333333);
		--bx-color-input-bg: var(--site-input-bg, #1a1a1a);
		--bx-color-input-border: var(--site-input-border, #404040);
		--bx-color-input-focus-border: var(--site-accent, #ff6b6b);
		--bx-color-input-fg: var(--site-text-primary, #fafafa);
		--bx-color-input-placeholder: var(--site-text-muted, #808080);
		--bx-color-loader-bg: var(--site-accent, #ff6b6b);
		--bx-color-success: #4ade80;
		--bx-color-warning: #fbbf24;
		--bx-color-error: #ff6b6b;
		--bx-color-info: #06b6d4;
	}
}