:root {
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: var(--font-display);

  --text-xs: 14px;
  --text-sm: 15px;
  --text-meta: 16px;
  --text-base: 17px;
  --text-article: 18px;
  --text-lead: 20px;
  --heading-card: 17px;
  --heading-small: 22px;
  --heading-section: clamp(28px, 2.4vw, 34px);
  --heading-page: clamp(40px, 3.4vw, 50px);
  --heading-hero: clamp(42px, 3.8vw, 52px);

  --page: #f7fafb;
  --surface: #ffffff;
  --surface-soft: #eef6f6;
  --surface-strong: #dce6ee;

  --ink: #0b2b3b;
  --ink-soft: #536a75;
  --ink-faint: #6b7f8c;
  --line: #d8e3e6;

  --brand: #087f82;
  --brand-hover: #06696c;
  --brand-active: #06696c;
  --brand-contrast: #ffffff;

  --accent: #21b6ad;
  --accent-soft: #d4f6f8;

  --header: #073149;
  --header-secondary: #073149;
  --topbar: #06283c;
  --header-ink: #ffffff;
  --header-ink-soft: #c5d8e8;

  --footer: #0a5260;
  --footer-secondary: #084550;
  --footer-ink: #f3f8fb;
  --footer-ink-soft: #c5d6e2;

  --rating: #f4b942;
  --success: #298a62;
  --success-soft: #e5f5ed;
  --danger: #c43b3b;
  --danger-soft: #fceaea;

  --shadow-card: 0 10px 28px rgba(3, 53, 70, 0.1);
  --shadow-hover: 0 14px 34px rgba(3, 53, 70, 0.14);

  --bg-page: var(--page);
  --bg-card: var(--surface);
  --bg-soft: var(--surface-soft);
  --bg-header-from: var(--header);
  --bg-header-to: var(--header);
  --bg-footer: var(--footer);
  --bg-hero: var(--header);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --text-on-dark: var(--header-ink);
  --text-on-dark-muted: var(--header-ink-soft);
  --line-dark: rgba(255, 255, 255, 0.22);
  --ok: var(--success);
  --ok-bg: var(--success-soft);
  --warn: var(--danger);
  --warn-bg: var(--danger-soft);

  --fs-h1: var(--heading-page);
  --fs-h2: var(--heading-section);
  --fs-h3: var(--heading-small);
  --fs-body: var(--text-base);
  --fs-sm: var(--text-meta);
  --fs-xs: var(--text-sm);

  --container: 1400px;
  --gutter: 32px;
  --radius: 5px;
  --shadow: var(--shadow-card);
}

@media (max-width: 1200px) {
  :root {
    --gutter: 28px;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: 14px;
    --heading-hero: clamp(34px, 9vw, 42px);
    --heading-page: clamp(31px, 8vw, 38px);
    --heading-section: clamp(25px, 6vw, 29px);
    --text-article: 16px;
  }
}