:root {
  --font-sans: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-display:
    "Avenir Next", "Segoe UI Variable Display", "Trebuchet MS", sans-serif;
  --color-background: #f4efe6;
  --color-background-strong: #ebe3d5;
  --color-surface: rgba(255, 251, 245, 0.88);
  --color-surface-strong: #fffdf9;
  --color-surface-muted: #edf4ea;
  --color-text: #172231;
  --color-text-muted: #617083;
  --color-placeholder: #93a0ae;
  --color-border: rgba(117, 134, 155, 0.2);
  --color-border-strong: rgba(99, 118, 140, 0.28);
  --color-primary: #0c7a65;
  --color-primary-dark: #0a5a4b;
  --color-primary-soft: #dff2ea;
  --color-accent: #ff9350;
  --color-accent-soft: #ffe4d1;
  --color-danger-bg: #fff1ee;
  --color-danger-text: #b6473d;
  --color-danger-border: rgba(182, 71, 61, 0.2);
  --color-success-bg: #ecfbf3;
  --color-success-text: #146c4f;
  --color-success-border: rgba(20, 108, 79, 0.2);
  --shadow-soft: 0 20px 50px rgba(22, 34, 49, 0.08);
  --shadow-card: 0 28px 64px rgba(22, 34, 49, 0.1);
  --shadow-glass: 0 24px 60px rgba(22, 34, 49, 0.12);
  --shadow-focus: 0 0 0 4px rgba(12, 122, 101, 0.14);
  --button-primary-bg: linear-gradient(135deg, #bce1e7 0%, #cb8e3f73 100%);
  --button-primary-color: var(--color-text-muted);
  --button-primary-shadow: 0 18px 34px rgba(111, 127, 87, 0.22);
  --button-primary-shadow-strong: 0 24px 40px rgba(111, 127, 87, 0.28);
  --button-primary-hover-bg: var(--button-primary-bg);
  --button-primary-hover-color: var(--color-text);
  --glass-surface: rgba(255, 255, 255, 0.34);
  --glass-surface-strong: rgba(255, 255, 255, 0.56);
  --glass-surface-soft: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.34);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --glass-backdrop: blur(24px) saturate(150%);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  --container-width: 1380px;
  --page-gutter: clamp(18px, 3vw, 32px);
}

html[data-theme="dark"] {
  --color-background: #111924;
  --color-background-strong: #0c131d;
  --color-surface: rgba(19, 29, 42, 0.9);
  --color-surface-strong: #172232;
  --color-surface-muted: #1e3140;
  --color-text: #edf4ff;
  --color-text-muted: #9fb1c6;
  --color-placeholder: #6f8196;
  --color-border: rgba(159, 177, 198, 0.14);
  --color-border-strong: rgba(159, 177, 198, 0.22);
  --color-primary: #40c7a5;
  --color-primary-dark: #8de6cb;
  --color-primary-soft: rgba(64, 199, 165, 0.16);
  --color-accent: #ffb176;
  --color-accent-soft: rgba(255, 177, 118, 0.14);
  --color-danger-bg: rgba(182, 71, 61, 0.16);
  --color-danger-text: #ffb8b0;
  --color-danger-border: rgba(255, 184, 176, 0.18);
  --color-success-bg: rgba(20, 108, 79, 0.18);
  --color-success-text: #9ce8c9;
  --color-success-border: rgba(156, 232, 201, 0.18);
  --shadow-soft: 0 24px 58px rgba(3, 8, 16, 0.34);
  --shadow-card: 0 32px 70px rgba(3, 8, 16, 0.42);
  --shadow-glass: 0 28px 68px rgba(3, 8, 16, 0.42);
  --shadow-focus: 0 0 0 4px rgba(64, 199, 165, 0.18);
  --button-primary-bg: linear-gradient(135deg, #8a60387d 0%, #4f7f89 100%);
  --button-primary-color: var(--color-text-muted);
  --button-primary-shadow: 0 18px 34px rgba(3, 8, 16, 0.32);
  --button-primary-shadow-strong: 0 24px 40px rgba(3, 8, 16, 0.38);
  --button-primary-hover-bg: var(--button-primary-bg);
  --button-primary-hover-color: var(--color-text);
  --glass-surface: rgba(18, 28, 40, 0.46);
  --glass-surface-strong: rgba(28, 40, 56, 0.66);
  --glass-surface-soft: rgba(18, 28, 40, 0.26);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 147, 80, 0.08),
      transparent 26%
    ),
    radial-gradient(
      circle at top right,
      rgba(134, 145, 104, 0.12),
      transparent 28%
    ),
    var(--color-background);
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h2 {
  color: var(--color-text-muted);
  font-size: 18px;
  font-weight: 600;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  font-family: var(--font-sans);
  line-height: 1.5;
  letter-spacing: -0.01em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 20%),
    linear-gradient(
      180deg,
      var(--color-background) 0%,
      var(--color-background-strong) 100%
    );
  color: var(--color-text);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
  filter: blur(12px);
}

body::before {
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 147, 80, 0.14);
}

body::after {
  left: -140px;
  bottom: 10%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(134, 145, 104, 0.12);
}

img,
picture,
svg,
canvas {
  display: block;
  max-width: 100%;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

input,
button,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
}

textarea {
  resize: vertical;
  max-height: 100px;
  overflow-y: auto;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  line-height: 1.02;
}

strong {
  font-weight: 800;
}

::selection {
  background: color-mix(in srgb, var(--color-primary) 24%, white);
  color: var(--color-text);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

main.page,
.site-header,
.site-footer {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
    linear-gradient(
      180deg,
      var(--color-background) 0%,
      var(--color-background-strong) 100%
    );
}

html[data-theme="dark"] body::before {
  background: rgba(255, 177, 118, 0.08);
}

html[data-theme="dark"] body::after {
  background: rgba(64, 199, 165, 0.1);
}

@media (max-width: 640px) {
  body::before,
  body::after {
    display: none;
  }
}