/**
 * Unified Design Tokens — canonical aliases for site + admin
 * Loaded early; dynamic values from site_appearance_css.php / admin_appearance_css.php override these.
 * All pages MUST use these tokens instead of hardcoded #fff / #000.
 */

:root {
    /* ── Canonical tokens (user request) ── */
    --bg-primary: var(--page-shell-bg, var(--background-color, #f3f4f6));
    --bg-secondary: var(--dash-bg-subtle, var(--bg-primary));
    --bg-elevated: var(--dash-bg-elevated, var(--bg-primary));
    --text-primary: var(--page-shell-text, var(--text-color-token, #374151));
    --text-secondary: var(--dash-text-secondary, var(--muted, #6b7280));
    --text-muted: var(--dash-text-muted, var(--text-secondary));
    --text-heading: var(--theme-heading, var(--heading-color, var(--text-primary)));
    --border-color: var(--border-color-token, #e5e7eb);
    --card-bg: var(--card-color, var(--dash-card, #ffffff));
    --card-border: var(--dash-card-border, var(--border-color));
    --button-bg: var(--button-color, var(--primary-color, #7c3aed));
    --button-text: var(--button-text, #ffffff);
    --button-hover: var(--button-hover, var(--button-bg));
    --input-bg: var(--theme-input-bg, var(--card-bg));
    --input-text: var(--text-color-token, var(--text-primary));
    --input-border: var(--theme-input-border, var(--border-color));
    --input-placeholder: var(--dash-text-muted, #9ca3af);
    --sidebar-bg: var(--sidebar-bg-token, var(--chrome-bg-top, #1e293b));
    --sidebar-text: var(--sidebar-text-token, var(--text-primary));
    --sidebar-icon: var(--sidebar-icon-token, var(--primary-color));
    --link-color: var(--link-color, #2563eb);
    --success-color: var(--success-color, #059669);
    --warning-color: var(--warning-color, #d97706);
    --danger-color: var(--danger-color, #dc2626);
    --modal-overlay-bg: rgba(10, 6, 18, 0.82);
    --modal-bg: var(--card-bg);
    --modal-text: var(--text-primary);
    --table-header-bg: var(--bg-secondary);
    --table-text: var(--text-primary);
    --table-border: var(--border-color);
    --alert-success-bg: var(--dash-green-bg, rgba(5, 150, 105, 0.12));
    --alert-success-text: var(--success-color);
    --alert-error-bg: var(--dash-red-bg, rgba(220, 38, 38, 0.12));
    --alert-error-text: var(--danger-color);
    --alert-warning-bg: var(--dash-amber-bg, rgba(217, 119, 6, 0.12));
    --alert-warning-text: var(--warning-color);
    --icon-color: var(--text-primary);
    --chrome-fg: #ffffff;
    --chrome-bg-top: var(--chrome-bg-top, #3d4251);
    --chrome-bg-mid: var(--chrome-bg-mid, #363b48);
    --chrome-bg-bottom: var(--chrome-bg-bottom, #2d3142);

    /* ── Namespace aliases (backward compat) ── */
    --bg: var(--bg-primary);
    --surface: var(--bg-primary);
    --bg-card: var(--card-bg);
    --text: var(--text-primary);
    --text-color: var(--text-primary);
    --muted: var(--text-muted);
    --primary: var(--primary-color, #7c3aed);
    --accent: var(--secondary-color, #6b7280);
}

/* Dark mode canonical tokens */
html.dark,
html.theme-dark {
    --bg-primary: var(--home-category-bg-dark, var(--page-shell-bg, #0a1628));
    --text-primary: var(--site-text-dark, var(--page-shell-text, #f1f5f9));
    --text-secondary: var(--dash-text-secondary, #cbd5e1);
    --text-muted: var(--dash-text-muted, #94a3b8);
    --text-heading: var(--theme-heading, var(--text-primary));
    --card-bg: var(--dash-card, #1e293b);
    --card-border: var(--dash-card-border, rgba(148, 163, 184, 0.2));
    --input-bg: var(--theme-input-bg, var(--card-bg));
    --input-text: var(--text-primary);
    --input-border: var(--theme-input-border, var(--card-border));
    --border-color: var(--border-color-token, var(--card-border));
    --bg-secondary: var(--dash-bg-subtle, var(--bg-elevated, #1e293b));
    --bg-elevated: var(--dash-bg-elevated, #111827);
    --modal-bg: var(--card-bg);
    --modal-text: var(--text-primary);
    --table-header-bg: var(--bg-secondary);
    --icon-color: var(--text-primary);
}

/* Light mode canonical tokens */
html.light,
html.theme-light {
    --bg-primary: var(--home-category-bg-light, var(--page-shell-bg, #f3f4f6));
    --text-primary: var(--site-text-light, var(--page-shell-text, #374151));
    --text-secondary: var(--dash-text-secondary, #6b7280);
    --text-muted: var(--dash-text-muted, #9ca3af);
    --text-heading: var(--theme-heading, #111827);
    --card-bg: var(--card-color, #ffffff);
    --card-border: var(--border-color-token, #e5e7eb);
    --input-bg: var(--theme-input-bg, #ffffff);
    --input-text: var(--text-color-token, var(--text-primary));
    --border-color: var(--border-color-token, #e5e7eb);
    --bg-secondary: var(--dash-bg-subtle, #f8fafc);
    --modal-bg: var(--card-bg);
    --modal-text: var(--text-primary);
}

/* Admin canonical tokens (both modes via admin_appearance_css.php) */
body.admin {
    --bg-primary: var(--admin-bg, var(--bg-primary));
    --bg-secondary: var(--admin-bg-subtle, var(--bg-secondary));
    --bg-elevated: var(--admin-bg-elevated, var(--bg-secondary));
    --text-primary: var(--admin-text, var(--text-primary));
    --text-secondary: var(--admin-text-secondary, var(--text-secondary));
    --text-muted: var(--admin-text-muted, var(--text-muted));
    --text-heading: var(--admin-heading, var(--text-heading));
    --border-color: var(--admin-card-border, var(--border-color));
    --card-bg: var(--admin-card, var(--card-bg));
    --card-border: var(--admin-card-border, var(--border-color));
    --button-bg: var(--admin-accent, var(--button-bg));
    --button-text: var(--admin-btn-primary-text, #ffffff);
    --input-bg: var(--admin-input-bg, var(--input-bg));
    --input-text: var(--admin-text, var(--input-text));
    --input-border: var(--admin-input-border, var(--input-border));
    --input-placeholder: var(--admin-input-placeholder, var(--input-placeholder));
    --sidebar-bg: var(--admin-sidebar-bg, var(--sidebar-bg));
    --sidebar-text: var(--admin-sidebar-text, var(--sidebar-text));
    --sidebar-icon: var(--admin-sidebar-icon, var(--sidebar-icon));
    --modal-bg: var(--admin-card, var(--card-bg));
    --modal-text: var(--admin-text, var(--text-primary));
    --table-header-bg: var(--admin-bg-subtle, var(--bg-secondary));
    --table-text: var(--admin-text, var(--text-primary));
    --table-border: var(--admin-card-border, var(--border-color));
    --icon-color: var(--admin-sidebar-icon, var(--admin-accent));
    --link-color: var(--admin-accent-light, var(--admin-accent));
}