@import './tokens.css';

:root {
  --bg: #F7F5FB;
  --surface: #FFFFFF;
  --surface-2: #FCFAFF;
  --primary: #4C2A92;
  --primary-hover: #5B34B3;
  --soft-purple: #EEE8FF;
  --soft-lavender: #F5F1FF;
  --gold: #F4BE41;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --text: #171327;
  --muted: #6E6885;
  --border: #E9E4F5;
  --shadow: 0 10px 30px rgba(23, 19, 39, 0.06);
  --shadow-soft: 0 4px 18px rgba(23, 19, 39, 0.05);
  --radius: 20px;

  /* Legacy teacher-portal tokens (backward-compatible aliases) */
  --navy: #3D2A8A;
  --ink: #1E1535;
  --lilacSoft: #EDE9FA;
  --success-soft: #ECFDF3;
  --success-text: #276749;
  --danger-soft: #FFF0F0;
  --danger-text: #8C1F1F;
}

html[data-theme="dark"] {
  --bg: #0F0B1A;
  --surface: #171126;
  --surface-2: #1E1730;
  --primary: #8B6BFF;
  --primary-hover: #9B80FF;
  --soft-purple: #2A2140;
  --soft-lavender: #241c38;
  --gold: #F4BE41;
  --success: #22C55E;
  --warning: #FBBF24;
  --danger: #F87171;
  --text: #F8F7FC;
  --muted: #A39BB8;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 6px 22px rgba(0, 0, 0, 0.22);

  /* Legacy dark-mode overrides */
  --navy: #8B6BFF;
  --ink: #F8F7FC;
  --lilacSoft: #2A2140;
  --success-soft: #173625;
  --success-text: #9be5b5;
  --danger-soft: #462224;
  --danger-text: #ffb2b2;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Manrope", "Inter", "DM Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0;
}

h1,h2,h3,h4,.font-heading,.brand h1,.hdr-title {
  font-family: "Manrope", "DM Sans", "Inter", "League Spartan", sans-serif !important;
  color: var(--text) !important;
}

header {
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
  backdrop-filter: blur(10px);
}

main, .main, .container {
  max-width: 1280px;
}

.card, section.bg-white, .panel, .widget, .metric, .denied-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
}

.toolbar, .filters {
  gap: 12px !important;
}

button, .btn, input[type="button"], input[type="submit"] {
  border-radius: var(--radius-lg) !important;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease !important;
}
button:hover, .btn:hover {
  transform: translateY(-1px);
}
button:active, .btn:active { transform: translateY(0); }

button:not(.secondary):not(.danger):not(.warn):not(.ghost),
.btn:not(.secondary):not(.danger):not(.warn):not(.ghost) {
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--primary) 80%, black 20%) !important;
}

button.secondary, .btn.secondary, .ghost {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

button.danger, .btn.danger { background: color-mix(in srgb, var(--danger) 18%, var(--surface)) !important; color: var(--danger) !important; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--surface)) !important; }
button.warn, .btn.warn { background: color-mix(in srgb, var(--warning) 22%, var(--surface)) !important; color: color-mix(in srgb, var(--warning) 65%, black) !important; border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--surface)) !important; }

input, select, textarea {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

.table-wrap, .overflow-auto {
  border-radius: var(--radius-lg);
}
table { border-collapse: separate !important; border-spacing: 0 !important; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border);
}
td {
  border-top: 1px solid var(--border) !important;
  color: var(--text) !important;
}
tr:hover td { background: color-mix(in srgb, var(--soft-lavender) 65%, var(--surface)) !important; }

.badge, .chip, .pill {
  border-radius: var(--radius-full) !important;
  font-weight: 700 !important;
}
.ok, .success { background: color-mix(in srgb, var(--success) 18%, var(--surface)) !important; color: color-mix(in srgb, var(--success) 75%, black) !important; border-color: color-mix(in srgb, var(--success) 45%, var(--surface)) !important; }
.bad, .error { background: color-mix(in srgb, var(--danger) 16%, var(--surface)) !important; color: color-mix(in srgb, var(--danger) 80%, black) !important; border-color: color-mix(in srgb, var(--danger) 45%, var(--surface)) !important; }
.wait { background: color-mix(in srgb, var(--warning) 20%, var(--surface)) !important; color: color-mix(in srgb, var(--warning) 75%, black) !important; border-color: color-mix(in srgb, var(--warning) 45%, var(--surface)) !important; }
.info { background: color-mix(in srgb, var(--primary) 16%, var(--surface)) !important; color: var(--primary) !important; border-color: color-mix(in srgb, var(--primary) 38%, var(--surface)) !important; }

.muted, .text-fsMuted, .hdr-sub, .small { color: var(--muted) !important; }

#codex-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--shadow);
}

@media (max-width: 840px) {
  #codex-theme-toggle {
    bottom: 76px;
  }
  .header-inner, main, .main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}