/**
 * DOLPHIN TOURNAMENTS — theme-light.css
 * Light theme token overrides — applied via html[data-theme="light"]
 * Zero flicker: applied by inline <script> before first paint
 */

html[data-theme="light"] {
  /* Surfaces */
  --bg-base:        #f4f5f7;
  --bg-surface:     #ffffff;
  --bg-panel:       #f9fafb;
  --bg-card:        #ffffff;
  --bg-elevated:    #f0f1f3;
  --bg-hover:       #e8eaed;
  --bg-active:      #e1e4e8;

  /* Borders */
  --border:         #dde1e7;
  --border-soft:    #e4e7ec;
  --border-strong:  #c8cdd6;

  /* Gold Accent stays */
  --accent:         #b8860b;
  --accent-dim:     rgba(184,134,11,0.1);
  --accent-glow:    rgba(184,134,11,0.2);
  --accent-hover:   #9a6f00;
  --accent-active:  #7d5a00;

  --accent2:        #d97706;
  --accent2-dim:    rgba(217,119,6,0.1);

  /* Semantic */
  --green:          #16a34a;
  --green-dim:      rgba(22,163,74,0.1);
  --red:            #dc2626;
  --red-dim:        rgba(220,38,38,0.1);
  --yellow:         #ca8a04;
  --yellow-dim:     rgba(202,138,4,0.1);
  --cyan:           #0891b2;
  --cyan-dim:       rgba(8,145,178,0.1);
  --blue:           #2563eb;
  --blue-dim:       rgba(37,99,235,0.1);
  --purple:         #7c3aed;
  --purple-dim:     rgba(124,58,237,0.1);

  /* Text */
  --text-primary:   #111318;
  --text-secondary: #4b5563;
  --text-muted:     #9ca3af;
  --text-disabled:  #d1d5db;

  /* Shadows */
  --shadow-xs:      0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg:      0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl:      0 16px 64px rgba(0,0,0,0.15);
  --shadow-card:    0 1px 4px rgba(0,0,0,0.08), 0 4px 20px rgba(0,0,0,0.06);
  --shadow-modal:   0 8px 48px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
  --glass-bg:       rgba(255,255,255,0.7);
  --glass-border:   rgba(0,0,0,0.07);
  --glass-hover:    rgba(255,255,255,0.85);
}

/* Light-specific component overrides */
html[data-theme="light"] body {
  background: var(--bg-base);
  color: var(--text-primary);
}

html[data-theme="light"] #topnav {
  background: #ffffff;
  border-bottom-color: var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

html[data-theme="light"] #sidebar {
  background: #ffffff;
  border-right-color: var(--border);
}

html[data-theme="light"] .sidebar-brand {
  border-bottom-color: var(--border);
}

html[data-theme="light"] .nav-item:hover {
  background: var(--bg-hover);
}
html[data-theme="light"] .nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
}

html[data-theme="light"] .form-input {
  background: #ffffff;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
html[data-theme="light"] .form-input:focus {
  background: #ffffff;
  border-color: var(--accent);
}

html[data-theme="light"] .auth-card {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

html[data-theme="light"] .stat-card,
html[data-theme="light"] .action-card,
html[data-theme="light"] .t-card {
  background: #ffffff;
  border-color: var(--border);
}

html[data-theme="light"] .btn-ghost {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
html[data-theme="light"] .btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

html[data-theme="light"] #dt-init-loader {
  background: #ffffff;
}

html[data-theme="light"] .topnav-bal {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

/* DataTables in light */
html[data-theme="light"] table.dataTable,
html[data-theme="light"] .dataTables_wrapper {
  color: var(--text-primary);
}
html[data-theme="light"] table.dataTable thead th {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border);
}
html[data-theme="light"] table.dataTable tbody tr {
  background: #ffffff;
}
html[data-theme="light"] table.dataTable tbody tr:hover {
  background: var(--bg-hover) !important;
}
html[data-theme="light"] .dataTables_wrapper select,
html[data-theme="light"] .dataTables_wrapper input {
  background: #ffffff;
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Theme toggle button */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.1rem;
  padding: 6px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), background var(--t-fast);
  line-height: 1;
}
.theme-toggle-btn:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

/* Smooth theme transition (only after initial load) */
html.theme-ready * {
  transition: background-color 180ms ease, border-color 180ms ease, color 120ms ease !important;
}
/* But never transition these — they cause flicker */
html.theme-ready img,
html.theme-ready video,
html.theme-ready canvas,
html.theme-ready .spin-ring,
html.theme-ready [class*="spin"],
html.theme-ready .dt-toast-item {
  transition: none !important;
}