/*
 * Design tokens and the two themes. Everything after this file reads these
 * custom properties, so it has to load first.
 *
 * Part of the ordered atlas stylesheet — the files in this directory are
 * linked in filename order and the order is load-bearing, so a rule moved
 * between them can change what wins.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Noto+Serif:wght@600&family=Spectral:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&display=swap');
/* ===================== Atlas CRM — design system (PhaseOne / sharp prototype) ===================== */
:root{
  --ink:#0E1626;
  --bg:#EDF0F5; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#F4F6FA;
  --line:#E1E5EC; --line2:#D6DCE5;
  --txt:#1A1E24; --muted:#6E767E; --faint:#9aa3b0;
  /* PhaseOne blue is the ONLY accent; teal/purple/etc are semantic */
  --accent:#1E63E0; --accent2:#0F8A7E; --accent3:#B5862B; --accent-soft:#DEEAFD;
  --grad:#1E63E0; --grad-text:#1E63E0;
  --gold:#B5862B; --ok:#2E7D5B; --warn:#B5862B; --bad:#B23A3A; --info:#1E63E0;
  --purple:#7A6BB5; --teal:#0F8A7E;
  --radius:12px; --shadow:0 6px 18px rgba(14,22,38,.08);
  /* --serif is now Inter (headings are sans, matching the Figma); wordmark keeps the serif */
  --serif:'Inter','Segoe UI',system-ui,sans-serif; --mono:'JetBrains Mono','IBM Plex Mono',monospace; --wordmark:'Noto Serif',Georgia,serif;
}
/* light is the default look; keep dark tokens for an optional [data-theme="dark"] later */
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#cfd0c9}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#b8b9b1}
/* badges: darker ink for contrast on light surfaces */
html[data-theme="light"] .b-high{background:rgba(248,113,113,.16);color:#b91c1c}
html[data-theme="light"] .b-medium{background:rgba(251,191,36,.20);color:#b45309}
html[data-theme="light"] .b-low{background:rgba(96,165,250,.18);color:#1d4ed8}
html[data-theme="light"] .b-rating{background:rgba(13,148,136,.14);color:#0f766e}
html[data-theme="light"] .b-stake{background:rgba(168,85,247,.16);color:#7c3aed}
html[data-theme="light"] .pill.code{background:rgba(99,102,241,.14);color:#4338ca}
/* login in light */
html[data-theme="light"] .auth-body{background:radial-gradient(1200px 700px at 70% -10%,#dfe6fb,transparent),#eef1f8}
html[data-theme="light"] .auth-card{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,249,254,.96));
  border-color:var(--line2)}
html[data-theme="light"] .auth-form input{background:#f3f5fb;border-color:var(--line2);color:var(--txt)}
html[data-theme="light"] .orb{opacity:.32}
/* theme toggle button */
.theme-toggle{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:var(--panel);border:1px solid var(--line2);color:var(--muted);cursor:pointer;transition:.18s;flex-shrink:0}
.theme-toggle:hover{color:var(--txt);border-color:var(--accent)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auth-toggle{position:absolute;top:18px;right:18px;z-index:2}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--txt);
  -webkit-font-smoothing:antialiased;font-size:14px}
a{color:inherit;text-decoration:none}
.mono,.stat .v,.crumbs .mono{font-family:var(--mono)}
::selection{background:color-mix(in srgb,var(--accent) 18%,transparent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cfd0c9;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:#b8b9b1}