:root {
  font-family: "Inter", system-ui, sans-serif;
  color: #101827;
  background: #f4f6f8;
  color-scheme: light;
  --color-bg: #f4f6f8;
  --color-bg-accent: #eef2f6;
  --color-panel: #ffffff;
  --color-card: #f9fafb;
  --color-text: #101827;
  --color-muted: #5b687a;
  --color-subtle: #edf1f5;
  --color-border: #dfe5ec;
  --color-primary: #0f3d6e;
  --color-primary-soft: #1b5fa7;
  --color-primary-strong: #0b2f55;
  --color-primary-contrast: #ffffff;
  --color-primary-shadow: rgba(15, 61, 110, 0.28);
  --color-input-bg: #ffffff;
  --color-input-border: #d5dbe5;
  --color-modal-bg: #ffffff;
  --color-modal-border: #dfe5ec;
  --color-warning-text: #a86109;
  --color-warning-bg: #fef3c7;
  --color-badge-bg: #e6edf6;
  --color-badge-text: #1f4b7a;
  --color-danger-bg: #fce7e7;
  --color-danger-text: #9b1c1c;
  --color-success-bg: #e6f8ee;
  --color-success-text: #14532d;
  --color-overlay: rgba(15, 23, 42, 0.5);
  --color-shadow: rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] {
  color: #e5eaf1;
  background: #0b1118;
  color-scheme: dark;
  --color-bg: #0b1118;
  --color-bg-accent: #0f1823;
  --color-panel: #111827;
  --color-card: #0f172a;
  --color-text: #e5eaf1;
  --color-muted: #9aa7b8;
  --color-subtle: #1c2432;
  --color-border: #1f2a3b;
  --color-primary: #5aa2ff;
  --color-primary-soft: #79b5ff;
  --color-primary-strong: #377fd6;
  --color-primary-contrast: #0b1118;
  --color-primary-shadow: rgba(90, 162, 255, 0.28);
  --color-input-bg: #141f2c;
  --color-input-border: #2c3a52;
  --color-modal-bg: #121c28;
  --color-modal-border: #25334a;
  --color-warning-text: #f2b05a;
  --color-warning-bg: rgba(242, 176, 90, 0.18);
  --color-badge-bg: rgba(90, 162, 255, 0.18);
  --color-badge-text: #9dc7ff;
  --color-danger-bg: rgba(127, 29, 29, 0.5);
  --color-danger-text: #fecaca;
  --color-success-bg: rgba(20, 83, 45, 0.4);
  --color-success-text: #bbf7d0;
  --color-overlay: rgba(4, 8, 16, 0.7);
  --color-shadow: rgba(0, 0, 0, 0.4);
}

[data-theme="pink"] {
  color: #541631;
  background: #fff1f7;
  color-scheme: light;
  --color-bg: #fff1f7;
  --color-bg-accent: #ffd9e8;
  --color-panel: #fff9fc;
  --color-card: #fff5fa;
  --color-text: #541631;
  --color-muted: #8f5870;
  --color-subtle: #ffe4ef;
  --color-border: #f0c4d7;
  --color-primary: #d63384;
  --color-primary-soft: #ec5ea2;
  --color-primary-strong: #b81f6b;
  --color-primary-contrast: #ffffff;
  --color-primary-shadow: rgba(214, 51, 132, 0.28);
  --color-input-bg: #fffafd;
  --color-input-border: #efc2d5;
  --color-modal-bg: #fff9fc;
  --color-modal-border: #f1cada;
  --color-warning-text: #9a4a00;
  --color-warning-bg: #fff1c7;
  --color-badge-bg: rgba(214, 51, 132, 0.12);
  --color-badge-text: #a31d63;
  --color-danger-bg: #ffe5eb;
  --color-danger-text: #b42345;
  --color-success-bg: #e6f8ee;
  --color-success-text: #166534;
  --color-overlay: rgba(84, 22, 49, 0.32);
  --color-shadow: rgba(184, 31, 107, 0.14);
}

* {
  box-sizing: border-box;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--color-bg), var(--color-bg-accent));
  color: var(--color-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: contain;
}