/* =========================================================
   Agile AI University — Refinement Layer
   ---------------------------------------------------------
   Version: v3.1.0 (Polish Upgrade — SAFE)
   Date: 2026-04-02

   PURPOSE:
   - Theme tokens (light/dark)
   - Minimal global polish
   - Zero component overrides
   - Works with surface-based CSS system

   RULE:
   - NO tables
   - NO sidebar
   - NO page-specific styling
========================================================= */


/* =========================================================
   🎨 THEME TOKENS
========================================================= */

/* LIGHT (default) */
:root {
  --bg-main: #f5f6f8;
  --bg-card: #ffffff;

  --text-main: #111827;
  --text-muted: #6b7280;

  --border: #e5e7eb;
  --border-strong: #d1d5db;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;

  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.04);

  /* 🔥 NEW (SAFE ADDITIONS) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --focus-ring: 0 0 0 2px rgba(37, 99, 235, 0.12);
}


/* DARK MODE */
:root[data-theme="dark"] {
  --bg-main: #0f172a;
  --bg-card: #111827;

  --text-main: #f9fafb;
  --text-muted: #9ca3af;

  --border: #1f2937;
  --border-strong: #374151;

  --primary: #3b82f6;
  --primary-hover: #2563eb;

  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.6);

  /* 🔥 Keep consistency */
  --focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.2);
}


/* =========================================================
   🌍 GLOBAL APPLY
========================================================= */

body {
  background: var(--bg-main);
  color: var(--text-main);
}


/* =========================================================
   📦 CARD (LIGHT POLISH ONLY)
========================================================= */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}


/* =========================================================
   🧾 INPUT BASE POLISH (NON-OPINIONATED)
========================================================= */

input,
select,
textarea {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  outline: none;
}


/* =========================================================
   🔘 BUTTON BASE (NEUTRAL ONLY)
========================================================= */

button {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

button:hover {
  background: rgba(37, 99, 235, 0.06);
}

button:active {
  transform: scale(0.98);
}


/* =========================================================
   ⚠️ ADMIN WARNING (GLOBAL SIGNAL)
========================================================= */

.admin-warning {
  background: #fff4e5;
  color: #7a4b00;
}

:root[data-theme="dark"] .admin-warning {
  background: #3a2e1f;
  color: #fbbf24;
}


/* =========================================================
   🧠 TEXT SYSTEM
========================================================= */

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


/* =========================================================
   🌗 TRANSITIONS (SMOOTH EXPERIENCE)
========================================================= */

body,
.card,
input,
select,
textarea,
button {
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}