:root {
  --bg: #0f1117;
  --panel: #161a23;
  --panel-overlay: rgba(255, 255, 255, 0.02);
  --card-overlay: rgba(255, 255, 255, 0.03);
  --muted: #9ca3af;
  --text: #e5e7eb;
  --accent: #7dd3fc;
  --accent-2: #22c55e;
  --warning: #f59e0b;
  --border: #1f2430;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  --topbar-bg: rgba(15, 17, 23, 0.8);
  --toggle-track: #374151;
  --input-bg: #0c0e14;
  --input-border: var(--border);
  --disabled-bg: #141a22;
  --disabled-border: #2a313c;
  --disabled-text: #7c8696;
  --disabled-strong: #0b0f18;
  --input-disabled-bg: #141a22;
  --input-disabled-text: #7c8696;
  --input-disabled-border: #2a313c;
  --font-body: "Red Hat Text", "Inter", "Segoe UI", system-ui, -apple-system,
    sans-serif;
  --font-heading: "Red Hat Display", "Red Hat Text", system-ui, -apple-system,
    sans-serif;
  font-family: var(--font-body);
}
:root[data-font="space"] {
  --font-body: "Space Grotesk", "Inter", "Segoe UI", system-ui, -apple-system,
    sans-serif;
  --font-heading: "Space Grotesk", "Red Hat Text", system-ui, -apple-system,
    sans-serif;
}
:root[data-font="manrope"] {
  --font-body: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "Manrope", "Manrope", system-ui, -apple-system, sans-serif;
}
:root[data-font="dmsans"] {
  --font-body: "DM Sans", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "DM Sans", "Red Hat Display", system-ui, -apple-system, sans-serif;
}
:root[data-font="sora"] {
  --font-body: "Sora", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "Sora", "Sora", system-ui, -apple-system, sans-serif;
}
:root[data-font="chivo"] {
  --font-body: "Chivo", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "Chivo", "Chivo", system-ui, -apple-system, sans-serif;
}
:root[data-font="atkinson"] {
  --font-body: "Atkinson Hyperlegible", "Inter", "Segoe UI", system-ui, -apple-system,
    sans-serif;
  --font-heading: "Atkinson Hyperlegible", "Atkinson Hyperlegible", system-ui,
    -apple-system, sans-serif;
}
:root[data-font="plex"] {
  --font-body: "IBM Plex Sans", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "IBM Plex Sans", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}
:root[data-theme="light"] {
  --bg: #dfe4ee;
  --panel: #f6f8fd;
  --panel-overlay: rgba(10, 12, 18, 0.06);
  --card-overlay: rgba(10, 12, 18, 0.11);
  --muted: #4b5563;
  --text: #0b1224;
  --accent: #0077c2;
  --accent-2: #15803d;
  --warning: #b45309;
  --border: #bcc5d6;
  --shadow: 0 12px 30px rgba(12, 18, 32, 0.12);
  --topbar-bg: rgba(249, 251, 255, 0.92);
  --toggle-track: #d1d5db;
  --input-bg: #f0f2f7;
  --input-border: #c5ccd9;
  --disabled-bg: #f4f6fb;
  --disabled-border: #c8d0df;
  --disabled-text: #7a8292;
  --disabled-strong: #eef1f7;
  --input-disabled-bg: #f8fafc;
  --input-disabled-text: #6a6f7b;
  --input-disabled-border: #c9d1df;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(125, 211, 252, 0.08),
      transparent 32%
    ),
    radial-gradient(circle at 80% 0%, rgba(34, 197, 94, 0.06), transparent 28%),
    linear-gradient(180deg, #0f1117 0%, #0e1119 55%, #0b0f15 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  line-height: 1.5;
  transition: background 240ms ease, color 240ms ease;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(
      circle at 25% 18%,
      rgba(0, 119, 194, 0.14),
      transparent 34%
    ),
    radial-gradient(circle at 78% 8%, rgba(21, 128, 61, 0.12), transparent 30%),
    linear-gradient(180deg, #f6f8fd 0%, #e8edf7 52%, #d6dde9 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}