:root {
  --color-bg: #EEF3F9;
  --color-surface: #F7F9FC;
  --color-bg-alt: #F4F7FB;
  --color-bg-soft: #E6EDF6;
  --color-bg-dark: #0F172A;
  --color-bg-dark-2: #16213B;
  --color-header-bg: rgba(247, 249, 252, 0.92);
  --color-surface-glass: rgba(247, 249, 252, 0.94);

  --color-text: #101828;
  --color-text-muted: #56606E;
  --color-text-dim: #8A93A1;
  --color-text-inverse: #F5F7FA;
  --color-text-inverse-muted: rgba(245, 247, 250, 0.7);

  --color-border: #E2E8F0;
  --color-border-dark: rgba(255, 255, 255, 0.14);

  /* Brand blue — лінки, focus, іконки, світлі секції */
  --color-accent: #1D4ED8;
  --color-accent-hover: #1E40AF;
  --color-accent-soft: rgba(29, 78, 216, 0.08);
  --color-on-accent: #FFFFFF;

  /* CTA sand — усі .btn--primary (dual: тепло на кнопках, синій у системі) */
  --color-cta: #C4A574;
  --color-cta-hover: #B08F5C;
  --color-cta-soft: rgba(196, 165, 116, 0.14);
  --color-on-cta: #1A1520;

  --color-success: #15803D;
  --color-success-soft: rgba(21, 128, 61, 0.1);
  --color-danger: #B42318;
  --color-danger-soft: rgba(180, 35, 24, 0.08);

  /* PrometeyLabs — кредит у футері */
  --pl-violet: #7b2cbf;
  --pl-orange: #e65100;

  --ff-display: "Outfit", system-ui, -apple-system, sans-serif;
  --ff-body: "Source Sans 3", system-ui, -apple-system, sans-serif;

  --container-max: 1320px;
  --container-pad: 1.25rem;
  --header-h: 68px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.16);

  --t-fast: 160ms cubic-bezier(0.23, 1, 0.32, 1);
  --t-base: 200ms cubic-bezier(0.23, 1, 0.32, 1);
  --t-slow: 400ms cubic-bezier(0.23, 1, 0.32, 1);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 160ms;
  --duration-ui: 200ms;
  --duration-modal: 300ms;

  --motion-drift: 2500ms;
  --motion-slide: 1500ms;
  --motion-reveal: 1000ms;
  --motion-soft: 500ms;
  --ease-drift: ease;
  --ease-reveal: ease-out;

  --z-header: 200;
  --z-drawer: 300;
  --z-skip-link: 400;

  --vh: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
  :root { --container-pad: 2rem; --header-h: 76px; }
}

@media (min-width: 1280px) {
  :root { --container-pad: 3rem; }
}