/* theme.css — shared design tokens + theming for Intranet Formula */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root, [data-theme="light"] {
  --bg:#eef1f7; --surface:#ffffff; --surface-2:#f6f8fc; --border:#e4e9f1;
  --text:#16233a; --text-dim:#64748b; --text-faint:#9aa7bd;
  --brand:#1a5490; --brand-dark:#0d3d6b; --brand-light:#2a6ab0; --accent:#0ea5e9;
  --topbar:#0c2240; --topbar-text:#c4d2e6;
  --shadow:0 1px 3px rgba(16,33,64,.06),0 4px 16px rgba(16,33,64,.05);
  --shadow-lg:0 8px 30px rgba(16,33,64,.12);
  /* legacy aliases (keep existing style.css rules working) */
  --primary-color:var(--brand); --primary-dark:var(--brand-dark); --primary-light:var(--brand-light);
  --background-color:var(--bg); --card-bg:var(--surface);
  --text-primary:var(--text); --text-secondary:var(--text-dim); --border-color:var(--border);
}
[data-theme="dark"] {
  --bg:#0a1120; --surface:#111b2e; --surface-2:#0d1626; --border:#22314c;
  --text:#e8eef7; --text-dim:#93a3bb; --text-faint:#5e6e88;
  --brand:#2a6ab0; --brand-dark:#1a5490; --brand-light:#5a9fe0; --accent:#38bdf8;
  --topbar:#070e1c; --topbar-text:#9fb0c9;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 10px 36px rgba(0,0,0,.5);
  --primary-color:var(--brand); --primary-dark:var(--brand-dark); --primary-light:var(--brand-light);
  --background-color:var(--bg); --card-bg:var(--surface);
  --text-primary:var(--text); --text-secondary:var(--text-dim); --border-color:var(--border);
}

body { font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
@keyframes fadeUp { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; }

/* Dark-mode overrides for Bootstrap components used by the app */
[data-theme="dark"] body { background:var(--bg); color:var(--text); }
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .list-group-item { background:var(--surface); color:var(--text); border-color:var(--border); }
[data-theme="dark"] .accordion-button { background:var(--surface-2); color:var(--text); }
[data-theme="dark"] .table { --bs-table-color:var(--text); --bs-table-bg:var(--surface); --bs-table-border-color:var(--border); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background:var(--surface-2); color:var(--text); border-color:var(--border); }
[data-theme="dark"] .dropdown-item { color:var(--text); }
[data-theme="dark"] .dropdown-item:hover { background:var(--surface-2); }