:root {
  --color-bg: #FAFAF8;
  --color-bg-alt: #F3F2EF;
  --color-surface: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-muted: #5C5C5C;
  --color-accent: #2c8b89;
  --color-accent-rgb: 44, 139, 137;
  --color-accent-hover: #226c6b;
  --color-accent-light: #f5f7f7;
  --color-accent-gradient-end: #3992a2;
  --color-border: #E8E6E1;
  --color-success: #2D6A4F;
  --color-error: #C0392B;

  --page-gutter: 16px;
  --page-gutter-top: 12px;
  --section-gap: 16px;
  --section-pad: 20px;
  --radius-header: 12px;
  --radius-section: 16px;
  --radius-inner: 12px;

  --font-family: "Manrope", system-ui, -apple-system, sans-serif;
  --header-height: 42px;
  --header-chip-h: 38px;
  --header-chip-h-scrolled: 28px;
  --dock-height: 60px;
  --fab-size: 52px;
  --transition: 0.2s ease;
  --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 4px 20px rgba(26, 26, 26, 0.08);
  --focus-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.35);

  --carousel-window-h: 200px;
  --carousel-titlebar-h: 52px;
  --text-col-inset-top: rgba(255, 255, 255, 0.92);
  --text-col-inset-bottom: rgba(26, 26, 26, 0.05);
  --footer-bg: #1a1a1a;
  --footer-fg: rgba(255, 255, 255, 0.85);
}

@media (min-width: 768px) {
  :root {
    --page-gutter: 20px;
    --page-gutter-top: 14px;
    --section-gap: 18px;
    --section-pad: 28px;
    --radius-header: 14px;
    --radius-section: 18px;
    --header-height: 46px;
    --header-chip-h: 42px;
    --header-chip-h-scrolled: 36px;
    --carousel-window-h: 280px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-gutter: 24px;
    --page-gutter-top: 16px;
    --section-gap: 20px;
    --section-pad: 40px;
    --radius-header: 16px;
    --radius-section: 20px;
    --header-height: 50px;
    --header-chip-h: 42px;
    --header-chip-h-scrolled: 36px;
    --carousel-window-h: 320px;
  }
}

@media (min-width: 1440px) {
  :root {
    --page-gutter: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0.01ms;
  }
}

@media (prefers-color-scheme: dark) {
  .site-public,
  .admin-layout {
    color-scheme: dark;
    --color-bg: #101010;
    --color-bg-alt: #171717;
    --color-surface: #1c1c1c;
    --color-text: #f3f2ef;
    --color-text-muted: #a8a6a0;
    --color-border: #2f2f2c;
    --color-accent-light: rgba(var(--color-accent-rgb), 0.14);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.42);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.48);
    --text-col-inset-top: rgba(255, 255, 255, 0.04);
    --text-col-inset-bottom: rgba(0, 0, 0, 0.2);
    --footer-bg: #0a0a0a;
    --footer-fg: rgba(255, 255, 255, 0.85);
  }

  .site-public .section-card:not(.site-footer) {
    background: var(--color-surface);
  }

  .site-public .site-header.is-scrolled,
  .admin-layout .site-header.is-scrolled {
    background: rgba(28, 28, 28, 0.72);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 1px 0 rgba(0, 0, 0, 0.35);
  }

  .site-public .clients-block__intro-line {
    color: rgba(255, 255, 255, 0.05);
  }

  .admin-layout .admin-sidebar {
    background: var(--color-surface);
    border-color: var(--color-border);
  }

  .admin-layout .admin-card {
    background: var(--color-surface);
    border-color: var(--color-border);
  }
}