/* Shared theme variable consumption to eliminate drift across pages */
/* NEUTRAL DEFAULTS - prevent purple flash on load, theme-runtime.js will override */

:root {
  --theme-primary: #4a5568;
  --theme-secondary: #2d3748;
  --theme-shadow: rgba(0,0,0,0.1);
  --theme-light: #f7fafc;
  --surface-50: #f5f7ff;
  --surface-100: #eef2ff;
}

/* Map common utility-like classes to variables (override via !important) */
.bg-purple-600, .bg-purple-700 { background-color: var(--theme-primary) !important; }
.text-purple-600 { color: var(--theme-primary) !important; }
.border-purple-600 { border-color: var(--theme-primary) !important; }
.ring-purple-600 { --tw-ring-color: var(--theme-primary) !important; }
.focus\:ring-purple-600:focus { --tw-ring-color: var(--theme-primary) !important; }

/* Light surface tints used throughout cards/blocks */
.bg-purple-50 { background-color: var(--surface-50) !important; }
.bg-purple-100 { background-color: var(--surface-100) !important; }

/* Component accents that reference theme variables (used by design-styles.css) */
/* NEUTRAL DEFAULTS - theme-runtime.js will override with actual theme colors */
:root {
  --hero-gradient: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  --primary-rgb: 74, 85, 104;
  --page-bg-rgb: 255, 255, 255;
}