:root {
  --bg: #f1f4fb;
  --card: #ffffff;
  --text: #172033;
  --muted: #63708a;
  --border: #d8dfed;
  --shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-soft: 0 2px 10px rgba(16, 24, 40, 0.05);
  --radius: 12px;
  --speed: 200ms;
  --personal: #7f77dd;
  --sport: #1d9e75;
  --projects: #ef9f27;
  --family: #d4537e;
  --books: #378add;
  --plans: #d85a30;
  /* Бренд: как в favicon — фиолетовый → синий */
  --brand-cta-end: #5f57c4;
  --brand-gradient: linear-gradient(135deg, var(--personal), var(--books));
  --brand-gradient-cta: linear-gradient(135deg, var(--personal), var(--brand-cta-end));
  --brand-shadow-cta: 0 6px 18px color-mix(in srgb, var(--brand-cta-end) 35%, transparent);
  --brand-shadow-lang: 0 4px 14px color-mix(in srgb, var(--books) 35%, transparent);
  --brand-shadow-logo: 0 10px 24px color-mix(in srgb, var(--books) 38%, transparent);
  --icon-accent: color-mix(in srgb, var(--personal) 68%, var(--text) 32%);
  --icon-accent-bg: color-mix(in srgb, var(--personal) 16%, transparent);
}

[data-theme="dark"] {
  --bg: #0f1421;
  --card: #1a2235;
  --text: #ecf2ff;
  --muted: #98a6c4;
  --border: #2b3651;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3);
  --icon-accent: color-mix(in srgb, var(--personal) 48%, white 52%);
  --icon-accent-bg: rgba(184, 178, 255, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--text);
  background: var(--bg);
  background-image: radial-gradient(circle at top left, rgba(127, 119, 221, 0.12), transparent 38%),
    radial-gradient(circle at top right, rgba(55, 138, 221, 0.09), transparent 40%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(60px);
  z-index: -1;
  animation: float-orb 12s ease-in-out infinite alternate;
}

body::before {
  background: rgba(127, 119, 221, 0.2);
  top: -100px;
  left: -80px;
}

body::after {
  background: rgba(55, 138, 221, 0.16);
  bottom: -120px;
  right: -80px;
  animation-delay: 1s;
}

button,
input,
select,
textarea {
  font: inherit;
  transition: all var(--speed) ease;
}

.text-muted-ui {
  color: var(--muted);
}

@keyframes float-orb {
  from {
    transform: translateY(0) translateX(0);
  }
  to {
    transform: translateY(18px) translateX(12px);
  }
}