/* Tailwind v4 CSS Variables & Custom Theme */

/* --- LIGHT THEME (Default) --- */
:root {
  --bg-app: #f1f5f9;    /* slate-100 */
  --bg-card: #ffffff;   /* white */
  --bg-input: #ffffff;
  --text-main: #0f172a; /* slate-900 */
  --text-dim: #64748b;  /* slate-500 */
  --border-ui: #cbd5e1; /* slate-300 */
  --color-primary: #2596be;
}

/* --- DARK THEME --- */
.dark {
  --bg-app: #0f172a;    /* slate-900 */
  --bg-card: #1e293b;   /* slate-800 */
  --bg-input: #0f172a;  /* slate-900 */
  --text-main: #f1f5f9; /* slate-100 */
  --text-dim: #94a3b8;  /* slate-400 */
  --border-ui: #334155; /* slate-700 */
}

/* Global Styles */
body {
  background-color: var(--bg-app);
  color: var(--text-main);
  transition: background-color 0.3s, color 0.3s;
}

/* UI Components */
.card-ui {
  background-color: var(--bg-card);
  border: 1px solid var(--border-ui);
  transition: background-color 0.3s, border-color 0.3s;
}

.input-ui {
  background-color: var(--bg-input);
  border: 1px solid var(--border-ui);
  color: var(--text-main);
}

.text-muted {
  color: var(--text-dim);
}

/* Logo Visibility Logic */
.logo-light { display: block; }
.logo-dark { display: none; }

.dark .logo-light { display: none; }
.dark .logo-dark { display: block; }

/* Semantic Helper Classes */
.text-pure-white {
  color: #ffffff !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.border-primary-dim {
  border-color: rgba(37, 150, 190, 0.2) !important;
}

.bg-primary-dim {
  background-color: rgba(37, 150, 190, 0.1) !important;
}