:root{
  --font: 'Poppins', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* surfaces — cool, soft whites */
  --bg: #eef1f9;
  --surface: #ffffff;
  --surface-2: #f7f8fd;
  --surface-3: #f0f2fa;
  --border: #e6e8f2;
  --border-2: #eef0f7;

  /* ink */
  --text: #191d33;
  --text-2: #5a6178;
  --text-3: #969cb4;

  /* brand — indigo + violet */
  --primary: #4f6ef7;
  --primary-600: #4360e8;
  --primary-700: #3a55d9;
  --primary-50: #edf1fe;
  --primary-100: #dde4fd;
  --violet: #8264ff;
  --violet-50: #f1edff;
  --grad: linear-gradient(135deg, #5b76f8 0%, #8264ff 100%);

  /* status accents (shared chroma family) */
  --green: #16a06a;   --green-50: #e6f6ee;
  --amber: #d68a17;   --amber-50: #fbf0db;
  --red:   #e2495f;   --red-50:   #fde8eb;
  --cyan:  #1196b0;   --cyan-50:  #e2f4f8;

  /* tweakable */
  --radius: 18px;
  --radius-sm: calc(var(--radius) * 0.62);
  --radius-xs: calc(var(--radius) * 0.4);
  --pill: 999px;

  /* density — overwritten by JS */
  --gap: 22px;
  --pad-card: 22px;
  --row-h: 56px;
  --font-scale: 1;

  --shadow-sm: 0 1px 2px rgba(28,34,71,.05), 0 1px 3px rgba(28,34,71,.04);
  --shadow: 0 2px 6px rgba(28,34,71,.05), 0 10px 28px rgba(28,34,71,.06);
  --shadow-lg: 0 8px 24px rgba(28,34,71,.08), 0 24px 60px rgba(28,34,71,.10);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: calc(15px * var(--font-scale));
  line-height: 1.45;
}
#root{ min-height: 100vh; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input,select,textarea{ font-family: inherit; }
a{ color: inherit; text-decoration: none; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: #d4d8ea; border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: #c2c7df; }

/* utility */
.mono{ font-family: var(--mono); }
.elev{ box-shadow: var(--shadow); }

/* fade/scale page transition */
@keyframes screenIn{ from{ transform: translateY(8px); } to{ transform:none; } }
.screen-in{ animation: screenIn .28s cubic-bezier(.2,.7,.3,1); }

@keyframes pop{ from{ opacity:0; transform: scale(.96); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalIn{ from{ opacity:0; transform: translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes toastIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }

/* loading splash before React mounts */
#boot{
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg); z-index: 9; flex-direction: column; gap: 18px;
}
#boot .mk{ width: 54px; height: 54px; border-radius: 16px; background: var(--grad); box-shadow: var(--shadow-lg); animation: pop .5s ease; }
#boot .tx{ color: var(--text-3); font-weight: 500; font-size: 14px; letter-spacing: .3px; }