/* ============================================================
   ЭВОЛЮШИН — Design Tokens
   Источник: DESIGN.md (валидирован, WCAG AA)
   ============================================================ */

:root {
  /* Цвета — базовый палитр (бренд, не меняется) */
  --color-primary: #0A1F1C;        /* глубокий зелёно-чернильный */
  --color-secondary: #5C6F6A;      /* приглушённый шалфей */
  --color-tertiary: #00897B;       /* фирменный изумруд (бренд) */
  --color-tertiary-strong: #00796B;/* изумруд для интерактива (WCAG AA) */
  --color-neutral: #FAF8F4;        /* тёплая слоновая кость */
  --color-surface: #F3F0EA;        /* чуть глубже, альтернативные секции */
  --color-border: #E4E0D8;         /* деликатные рамки */
  --color-accent-glow: #66B8AE;    /* светлый изумруд, свечения */
  --color-success: #2E7D6B;        /* подтверждения */
  --color-olive: #5C6F3A;          /* оливковый из интерьера клиники */

  --on-primary: #FFFFFF;
  --on-tertiary: #FFFFFF;
  --on-dark: #FFFFFF;
  --on-neutral: #0A1F1C;
  /* Skip-link: контрастная пара для каждой темы */
  --skip-bg: #0A1F1C;
  --skip-fg: #E8E4DC;

  /* Семантические токены (тема-зависимые) */
  --color-text: var(--color-primary);
  --color-text-muted: var(--color-secondary);
  --bg-page: #FAF8F4;
  --bg-surface: #F3F0EA;
  --bg-card: #FAF8F4;
  --bg-elevated: #FFFFFF;
  --bg-dark: #0A1F1C;
  --border-soft: rgba(228, 224, 216, 0.7);
  --nav-scrolled-bg: rgba(250, 248, 244, 0.85);
  --hero-overlay-1: rgba(250, 248, 244, 0.94);
  --hero-overlay-2: rgba(250, 248, 244, 0.82);
  --hero-overlay-3: rgba(250, 248, 244, 0.18);
  --hero-overlay-4: rgba(250, 248, 244, 0);
  --hero-overlay-mobile-1: rgba(250, 248, 244, 0.88);
  --hero-overlay-mobile-2: rgba(250, 248, 244, 0.46);
  --hero-overlay-mobile-3: rgba(250, 248, 244, 0);
  --hero-title-shadow: 0 2px 12px rgba(250, 248, 244, 0.92), 0 5px 22px rgba(10, 31, 28, 0.14);
  --hero-title-bg: rgba(250, 248, 244, 0.22);
  --ghost-btn-bg: rgba(250, 248, 244, 0.34);
  --ghost-btn-text: var(--color-primary);
  --ghost-btn-border: rgba(250, 248, 244, 0.72);
  --ghost-btn-shadow: 0 8px 24px rgba(10, 31, 28, 0.12);
  --ghost-btn-hover-bg: rgba(250, 248, 244, 0.76);
  --ghost-btn-hover-border: rgba(250, 248, 244, 0.9);
  --mouse-shell-bg: rgba(250,248,248,.08);
  --mouse-shell-shadow: inset 0 0 0 1px rgba(250,248,244,.18), 0 0 16px rgba(0,137,123,.12);
  --card-border: rgba(228, 224, 216, 0.7);
  --shadow-color-base: rgba(10, 31, 28, 0.06);
  --shadow-color-hover: rgba(10, 31, 28, 0.10);
  --shadow-card: 0 1px 2px rgba(10,31,28,0.04), 0 8px 24px rgba(10,31,28,0.06);
  --shadow-card-hover: 0 2px 4px rgba(10,31,28,0.05), 0 16px 40px rgba(10,31,28,0.10);
  --shadow-photo: 0 1px 2px rgba(10,31,28,0.04), 0 12px 32px rgba(10,31,28,0.10);
  --glow: 0 0 40px rgba(0,137,123,0.25);
  --service-hover-bg: rgba(0,137,123,0.04);
  --form-note-bg: rgba(46,125,107,0.1);
  --device-img-shadow: 0 24px 64px rgba(0,0,0,0.35);
  --contact-card-bg: rgba(0,137,123,0.06);
  --contact-card-border: rgba(0,137,123,0.2);

  /* Типографика */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-display: clamp(3rem, 7vw, 5.5rem);
  --text-h1: clamp(2.4rem, 5vw, 4rem);
  --text-h2: clamp(1.9rem, 3.5vw, 2.8rem);
  --text-h3: clamp(1.4rem, 2.2vw, 1.8rem);
  --text-body-lg: clamp(1.05rem, 1.5vw, 1.2rem);
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caps: 0.75rem;

  /* Скругления */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 9999px;

  /* Отступы */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-xxl: 96px;
  --section-gap: clamp(80px, 12vw, 144px);

  /* Контейнер */
  --container: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Скорости */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.6s;
  --dur-slow: 1s;
}

/* ============================================================
   ТЁМНАЯ ТЕМА
   ============================================================ */

[data-theme="dark"] {
  --color-primary: #0A1A18;          /* ещё глубже — для тёмных секций, футера */
  --color-secondary: #8FA39E;        /* светлее шалфей для читаемости */
  --color-tertiary: #00A99B;         /* ярче изумруд на тёмном */
  --color-tertiary-strong: #26A69A;  /* ярче для интерактива */
  --color-neutral: #0E1F1C;          /* тёмная страница */
  --color-surface: #152825;          /* тёмные альт-секции */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-accent-glow: #7DD3CB;      /* светлее свечение */
  --color-success: #4DB6AC;

  --on-primary: #E8E4DC;
  --on-neutral: #E8E4DC;
  --skip-bg: #E8E4DC;
  --skip-fg: #0A1F1C;             /* светлый текст на тёмном фоне */
  --on-dark: #FFFFFF;

  --color-text: #E8E4DC;             /* основной текст — тёплая слоновая кость */
  --color-text-muted: #8FA39E;       /* приглушённый текст */
  --bg-page: #0E1F1C;
  --bg-surface: #152825;
  --bg-card: #1A2E2B;
  --bg-elevated: #1A2E2B;
  --bg-dark: #0A1A18;
  --border-soft: rgba(255, 255, 255, 0.08);
  --nav-scrolled-bg: rgba(14, 31, 28, 0.85);
  --hero-overlay-1: rgba(14, 31, 28, 0.94);
  --hero-overlay-2: rgba(14, 31, 28, 0.82);
  --hero-overlay-3: rgba(14, 31, 28, 0.18);
  --hero-overlay-4: rgba(14, 31, 28, 0);
  --hero-overlay-mobile-1: rgba(14, 31, 28, 0.88);
  --hero-overlay-mobile-2: rgba(14, 31, 28, 0.46);
  --hero-overlay-mobile-3: rgba(14, 31, 28, 0);
  --hero-title-shadow: 0 2px 12px rgba(14, 31, 28, 0.92), 0 5px 22px rgba(0, 0, 0, 0.4);
  --hero-title-bg: rgba(14, 31, 28, 0.35);
  --ghost-btn-bg: rgba(255, 255, 255, 0.06);
  --ghost-btn-text: #E8E4DC;
  --ghost-btn-border: rgba(255, 255, 255, 0.15);
  --ghost-btn-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --ghost-btn-hover-bg: rgba(255, 255, 255, 0.1);
  --ghost-btn-hover-border: var(--color-tertiary);
  --mouse-shell-bg: rgba(14,31,28,.08);
  --mouse-shell-shadow: inset 0 0 0 1px rgba(14,31,28,.18), 0 0 16px rgba(0,169,155,.12);
  --card-border: rgba(255, 255, 255, 0.08);
  --shadow-color-base: rgba(0, 0, 0, 0.3);
  --shadow-color-hover: rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.25);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.25), 0 16px 40px rgba(0,0,0,0.35);
  --shadow-photo: 0 1px 2px rgba(0,0,0,0.2), 0 12px 32px rgba(0,0,0,0.35);
  --glow: 0 0 40px rgba(0,169,155,0.3);
  --service-hover-bg: rgba(0,169,155,0.06);
  --form-note-bg: rgba(77,182,172,0.12);
  --device-img-shadow: 0 24px 64px rgba(0,0,0,0.55);
  --contact-card-bg: rgba(0,169,155,0.08);
  --contact-card-border: rgba(0,169,155,0.2);
}

/* Плавный переход при смене темы */
[data-theme],
[data-theme] *,
[data-theme] *::before,
[data-theme] *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--dur-med);
  transition-timing-function: var(--ease-out);
}

/* Не применять transition при первичной загрузке (anti-flash) */
.no-theme-transition,
.no-theme-transition *,
.no-theme-transition *::before,
.no-theme-transition *::after {
  transition: none !important;
}