/* Centralized color tokens with light/dark themes via CSS variables */

/* Default theme: dark */
:root {
  --color-bg: #0b1220;           /* slate-950-ish */
  --color-bg-soft: #0f172a;      /* slate-900 */
  --color-surface: #111827;      /* slate-900 variant */
  --color-text: #e5e7eb;         /* slate-200 */
  --color-text-muted: #94a3b8;   /* slate-400 */

  --color-accent: #4F46E5;       /* indigo-600 */
  --color-primary: #484F8A;      /* custom primary */
  --color-secondary: #F1894E;    /* orange custom */

  --color-border: rgba(255,255,255,0.10);
  --color-ring: rgba(255,255,255,0.12);
  --color-shadow: rgba(0,0,0,0.35);

  --color-onAccent: #ffffff;
  
  /* Classes utilitaires pour les couleurs personnalisées */
  --tw-color-primary: var(--color-primary);
  --tw-color-secondary: var(--color-secondary);
  --tw-color-accent: var(--color-accent);
  
  /* Override Tailwind colors with CSS variables */
  --tw-bg-slate-900: var(--color-bg-soft);
  --tw-bg-slate-800: var(--color-surface);
  --tw-bg-slate-700: var(--color-surface);
  --tw-text-white: var(--color-text);
  --tw-text-slate-200: var(--color-text);
  --tw-text-slate-300: var(--color-text-muted);
  --tw-text-slate-400: var(--color-text-muted);
  --tw-border-slate-800: var(--color-border);
  --tw-border-white-10: var(--color-border);
}

/* Light theme override (apply on html or body with class="light") */
.light {
  --color-bg: #f8fafc;           /* slate-50 */
  --color-bg-soft: #f1f5f9;      /* slate-100 */
  --color-surface: #ffffff;      /* white */
  --color-text: #0f172a;         /* slate-900 */
  --color-text-muted: #475569;   /* slate-600 */

  --color-accent: #4F46E5;       /* indigo-600 */
  --color-primary: #484F8A;      /* custom primary */
  --color-secondary: #F1894E;    /* orange custom */

  --color-border: rgba(2,6,23,0.10);
  --color-ring: rgba(99,102,241,0.35);
  --color-shadow: rgba(15,23,42,0.15);

  --color-onAccent: #ffffff;
  
  /* Override Tailwind colors for light theme */
  --tw-bg-slate-900: var(--color-bg-soft);
  --tw-bg-slate-800: var(--color-surface);
  --tw-bg-slate-700: var(--color-surface);
  --tw-text-white: var(--color-text);
  --tw-text-slate-200: var(--color-text);
  --tw-text-slate-300: var(--color-text-muted);
  --tw-text-slate-400: var(--color-text-muted);
  --tw-border-slate-800: var(--color-border);
  --tw-border-white-10: var(--color-border);
}

/* Optional helper utility classes (progressive enhancement) */
.bg-token {
  background-color: var(--color-bg);
}
.surface-token {
  background-color: var(--color-surface);
}
.text-token {
  color: var(--color-text);
}
.text-muted-token {
  color: var(--color-text-muted);
}
.border-token {
  border-color: var(--color-border);
}
.ring-token {
  box-shadow: 0 0 0 1px var(--color-ring);
}
.accent-bg-token {
  background-color: var(--color-accent);
  color: var(--color-onAccent);
}
.accent-text-token { color: var(--color-accent); }
.primary-text-token { color: var(--color-primary); }
.secondary-text-token { color: var(--color-secondary); }

/* Small utility for gradient glows using tokens */
.glow-accent {
  background: radial-gradient(40% 40% at 50% 50%, color-mix(in oklab, var(--color-accent) 35%, transparent) 0%, transparent 100%);
  filter: blur(60px);
  opacity: .5;
}

/* Theme-aware overrides - only when light class is present */
.light body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Only override specific elements in light mode */
.light .bg-slate-900 {
  background-color: var(--color-bg-soft);
}

.light .bg-slate-800 {
  background-color: var(--color-surface);
}

.light .text-white {
  color: var(--color-text);
}

.light .text-slate-300 {
  color: var(--color-text-muted);
}

.light .text-slate-400 {
  color: var(--color-text-muted);
}

.light .border-slate-800 {
  border-color: var(--color-border);
}

.light .border-white\/10 {
  border-color: var(--color-border);
}

/* Classes utilitaires pour les couleurs personnalisées */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-accent { border-color: var(--color-accent) !important; }
.text-onAccent { color: var(--color-onAccent) !important; }

/* Support des opacités pour les couleurs personnalisées */
.bg-primary\/20 { background-color: rgba(72, 79, 138, 0.2) !important; }
.bg-secondary\/20 { background-color: rgba(241, 137, 78, 0.2) !important; }
.bg-accent\/20 { background-color: rgba(79, 70, 229, 0.2) !important; }
.bg-accent\/30 { background-color: rgba(79, 70, 229, 0.3) !important; }
.bg-accent\/60 { background-color: rgba(79, 70, 229, 0.6) !important; }
.bg-secondary\/60 { background-color: rgba(241, 137, 78, 0.6) !important; }
.bg-primary\/60 { background-color: rgba(72, 79, 138, 0.6) !important; }
.bg-primary\/20 { background-color: rgba(72, 79, 138, 0.2) !important; }
.bg-secondary\/15 { background-color: rgba(241, 137, 78, 0.15) !important; }
.bg-accent\/15 { background-color: rgba(79, 70, 229, 0.15) !important; }
.bg-accent\/25 { background-color: rgba(79, 70, 229, 0.25) !important; }
.bg-primary\/15 { background-color: rgba(72, 79, 138, 0.15) !important; }