/**
 * Legacy CSS variable aliases — maps Vision, ODS, and DB Tools
 * --color-* / --bg-* names onto Quiet Luxury DS tokens (tokens.css).
 *
 * Load immediately after tokens.css via ds_assets_enqueue().
 * Apps that ship their own variables.css after this file will override aliases.
 */

:root {
	/* === Cross-app semantic (Vision names) ========================= */
	--color-primary: var(--brand-navy);
	--color-primary-light: var(--brand-accent);
	--color-primary-bg: var(--brand-accent);
	--color-accent: var(--brand-accent);
	--color-accent-light: var(--brand-success);
	--color-background: var(--surface-canvas);
	--color-card-bg: var(--surface-elevated);
	--color-page: var(--surface-elevated);
	--color-cream: var(--surface-subtle);
	--color-text: var(--text-primary);
	--color-text-light: var(--text-secondary);
	--color-text-muted: var(--text-secondary);
	--color-border: var(--border-default);
	--color-border-light: var(--border-default);
	--color-success: var(--brand-success);
	--color-warning: var(--brand-danger);
	--color-danger: var(--brand-danger);
	--color-orange: var(--brand-warning);
	--color-info: var(--brand-info);
	--color-surface: var(--surface-elevated);
	--color-surface-muted: var(--surface-subtle);
	--color-focus-ring: var(--brand-accent);

	/* === Semantic tints (no 1:1 DS token; closest soft wash) ============= */
	--color-notice: #14b8a6;
	--color-notice-hover: #0d9488;
	--color-yellow: #ffc107;
	--color-yellow-bg: var(--brand-warning-soft);
	--color-yellow-text: #856404;
	--color-danger-light: var(--brand-danger-soft);
	--color-danger-dark: var(--brand-danger-text);
	--color-success-light: var(--brand-success-soft);
	--color-success-border: var(--brand-success-soft);
	--color-success-dark: var(--brand-success-text);
	--color-success-hover: var(--brand-success);
	--color-info-light: var(--brand-accent-soft);
	--color-info-dark: #084298;
	--color-orange-bg: var(--brand-warning-soft);
	--color-orange-dark: var(--brand-warning);

	/* === OC appointment slots (Vision; see docs/DESIGN.md) ============== */
	--color-appt-orientation: #2196f3;
	--color-appt-orientation-bg: #e3f2fd;
	--color-appt-orientation-text: #1976d2;
	--color-appt-lowvoltage: #e91e8c;
	--color-appt-lowvoltage-bg: #fce4ec;
	--color-appt-lowvoltage-text: #ad1457;
	--color-appt-selection: #9c27b0;
	--color-appt-selection-bg: #f3e5f5;
	--color-appt-selection-text: #7b1fa2;
	--color-appt-signoff: #4caf50;
	--color-appt-signoff-bg: #e8f5e9;
	--color-appt-signoff-text: #2e7d32;

	/* === Collections (ST legacy names → DS coll tokens) ================== */
	--color-gold: var(--coll-gold);
	--color-emerald: var(--coll-emerald);
	--color-ruby: var(--coll-ruby);
	--color-sapphire: var(--coll-sapphire);
	--color-diamond: var(--coll-diamond);

	/* === ODS numeric palette ============================================= */
	--color-10: var(--brand-accent);
	--color-10-lighten-5: color-mix(in srgb, var(--brand-accent) 88%, white);
	--color-10-lighten-10: color-mix(in srgb, var(--brand-accent) 76%, white);
	--color-20: var(--brand-navy);
	--color-20-lighten-5: color-mix(in srgb, var(--brand-navy) 92%, white);
	--color-20-lighten-10: color-mix(in srgb, var(--brand-navy) 84%, white);
	--color-30: var(--brand-danger);
	--color-30-lighten-5: color-mix(in srgb, var(--brand-danger) 88%, white);
	--color-30-lighten-10: color-mix(in srgb, var(--brand-danger) 76%, white);
	--color-40: var(--surface-canvas);
	--color-40-darken-3: var(--surface-subtle);
	--color-40-tint: var(--surface-subtle);
	--color-50: var(--surface-sunken);
	--color-50-darken-3: var(--surface-sunken);
	--color-60: var(--brand-success);
	--color-60-lighten-5: color-mix(in srgb, var(--brand-success) 88%, white);
	--color-70: var(--brand-success-soft);
	--color-80: var(--brand-danger);
	--color-80-lighten-5: color-mix(in srgb, var(--brand-danger) 88%, white);
	--color-80-lighten-10: color-mix(in srgb, var(--brand-danger) 76%, white);
	--color-90: var(--surface-sunken);
	--color-100: var(--brand-warning);
	--color-banner-tint: var(--surface-subtle);

	/* === Typography aliases (ST/ODS) ===================================== */
	--font-primary: var(--font-sans);
	--font-body: var(--font-sans);

	/* === Spacing aliases (ST rem scale → DS 4px grid) ==================== */
	--spacing-xs: var(--space-2);
	--spacing-sm: var(--space-4);
	--spacing-md: var(--space-6);
	--spacing-lg: var(--space-8);
	--spacing-xl: var(--space-9);

	/* === DB Tools dark palette (always-dark apps; literals match DB UI) == */
	--bg-body: #0a0f1a;
	--bg-card: #121a28;
	--bg-header: #0d1420;
	--border: rgba(255, 255, 255, 0.18);
	--text: #f1f5f9;
	--text-muted: #94a3b8;
	--text-dim: #64748b;
}

/* === Dark theme — align legacy names with DS dark tokens =============== */
[data-theme="dark"] {
	--color-primary: var(--text-primary);
	--color-primary-light: var(--brand-accent);
	--color-primary-bg: var(--brand-accent);
	--color-background: var(--surface-canvas);
	--color-card-bg: var(--surface-elevated);
	--color-page: var(--surface-elevated);
	--color-cream: var(--surface-subtle);
	--color-text: var(--text-primary);
	--color-text-light: var(--text-secondary);
	--color-text-muted: var(--text-secondary);
	--color-border: var(--border-default);
	--color-border-light: var(--border-default);

	--color-yellow-bg: rgba(180, 83, 9, 0.35);
	--color-yellow-text: #fef3c7;
	--color-danger-light: var(--brand-danger-soft);
	--color-success-light: var(--brand-success-soft);
	--color-success-border: var(--brand-success-soft);
	--color-info-light: var(--brand-accent-soft);
	--color-orange-bg: var(--brand-warning-soft);

	--color-appt-orientation: #2563eb;
	--color-appt-orientation-bg: #1e3a5f;
	--color-appt-orientation-text: #93c5fd;
	--color-appt-lowvoltage: #db2777;
	--color-appt-lowvoltage-bg: #4a1c2e;
	--color-appt-lowvoltage-text: #f9a8d4;
	--color-appt-selection: #7c3aed;
	--color-appt-selection-bg: #3d2652;
	--color-appt-selection-text: #c4b5fd;
	--color-appt-signoff: #16a34a;
	--color-appt-signoff-bg: #0f3320;
	--color-appt-signoff-text: #86efac;

	--color-20: var(--brand-accent);
	--color-20-lighten-5: color-mix(in srgb, var(--brand-accent) 85%, white);
	--color-20-lighten-10: color-mix(in srgb, var(--brand-accent) 72%, white);
	--color-40: var(--surface-canvas);
	--color-40-darken-3: var(--surface-sunken);
	--color-50: var(--border-default);
	--color-50-darken-3: var(--surface-subtle);
	--color-70: var(--brand-success-soft);
	--color-90: var(--border-default);
	--color-banner-tint: var(--surface-elevated);
}