/* ==========================================================
   variables.css — default design tokens
   These are FACTORY DEFAULTS ONLY. The live values seen in the
   app come from includes/theme.php (render_theme_style_block),
   which prints an overriding :root block from the `settings`
   table (Admin → Settings → Appearance). Do not hardcode colors
   anywhere else — always reference these variables.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');

:root{
  --primary-color:#1e3a8a;
  --primary-dark:#0f2555;
  --secondary-color:#64748b;
  --accent-color:#2f6fed;
  --success-color:#0f9d58;
  --warning-color:#d97706;
  --danger-color:#dc2626;
  --body-bg:#f3f5fa;
  --card-bg:#ffffff;
  --border-color:#e6e9f2;
  --sidebar-bg:#0f2555;
  --sidebar-text:#dfe6fa;
  --font-family:'Inter','Segoe UI',Roboto,Arial,sans-serif;
  --heading-font:'Poppins','Inter',sans-serif;
  --base-font-size:14.5px;
  --border-radius:12px;
  --shadow-sm:0 1px 2px rgba(16,24,55,.05);
  --shadow-md:0 4px 16px rgba(16,24,55,.08);
  --shadow-lg:0 12px 32px rgba(16,24,55,.12);
  --sidebar-width:258px;
  --table-row-padding:11px 14px;

  /* Fixed text tones — not exposed to Appearance Settings, kept stable for readability */
  --text-color:#1a2033;
  --text-muted:#6b7280;
}

/* ---------------- Dark mode ----------------
   Toggled by body[data-theme="dark"] (see theme.js). Only surfaces and
   text invert; brand colors (primary/accent/success/etc.) stay the same
   so charts, badges, and brand identity remain consistent. */
body[data-theme="dark"]{
  --body-bg:#10131c;
  --card-bg:#171b28;
  --border-color:#262b3d;
  --text-color:#e6e9f5;
  --text-muted:#9aa1b8;
}