/* ============================================================
   BotLabs Agency — shared design tokens for Ukrainian SEO pages.
   Load this file before every other stylesheet.
   ============================================================ */
:root {
  --color-primary: #275efe;
  --color-primary-dark: #1745d6;
  --color-primary-deep: #0e34b1;
  --color-primary-light: #6192ff;
  --color-primary-pale: #9bbdff;
  --color-primary-line: #c4d8ff;
  --color-primary-soft: #e8f2ff;

  --color-dark: #343745;
  --color-dark-deep: #121523;
  --color-ink: #262834;
  --color-muted: #5f6b89;

  --color-white: #fff;
  --color-canvas: #fff;
  --color-surface: #f7f8fb;
  --color-bg-card: #f2f3f6;
  --color-line: #dcdde1;
  --color-tag-bg: #ececec;
  --color-tag-text: #5f6b89;

  --color-success: #1aa477;
  --color-warning: #e0a030;
  --color-danger: #dd594f;

  --color-accent: var(--color-primary);
  --color-accent-soft: var(--color-primary-soft);

  --font-display: Montserrat, Gilroy, Arial, sans-serif;
  --font-body: Gilroy, Arial, sans-serif;

  --text-hero: clamp(2.8rem, 2rem + 4vw, 4.1rem);
  --text-h2: clamp(2.1rem, 1.6rem + 2.2vw, 3.1rem);
  --text-h3: clamp(1.3rem, 1.2rem + .5vw, 1.6rem);
  --text-lg: clamp(1.13rem, 1.06rem + .34vw, 1.32rem);
  --text-base: clamp(1rem, .96rem + .2vw, 1.1rem);
  --text-sm: clamp(.88rem, .85rem + .14vw, .95rem);
  --text-xs: clamp(.76rem, .74rem + .1vw, .82rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.55;
  --ls-tight: -.025em;
  --ls-caps: .06em;

  --radius-button: 5px;
  --radius-card: 10px;
  --radius-media: 10px;
  --radius-pill: 25.5px;

  --shadow-1: 0 1px 2px rgba(52, 55, 69, .06), 0 0 0 1px rgba(52, 55, 69, .05);
  --shadow-2: 0 8px 24px -12px rgba(52, 55, 69, .18);
  --shadow-3: 0 24px 64px -28px rgba(52, 55, 69, .28);
  --shadow-cta: 0 12px 28px -10px rgba(39, 94, 254, .38);

  --max: 1470px;
  --max-narrow: 980px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-lg: clamp(96px, 9vw, 150px);
  --section: clamp(72px, 7vw, 110px);
  --section-sm: clamp(48px, 5vw, 72px);
  --card-gap: clamp(24px, 2.6vw, 39px);
  --card-pad: clamp(28px, 3.2vw, 50px);

  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 180ms;
  --dur-base: 260ms;

  /* Compatibility aliases used by the existing SEO styles. */
  --blue: var(--color-primary);
  --blue-dark: var(--color-primary-dark);
  --surface: var(--color-white);
  --ink: var(--color-ink);
  --ink-deep: var(--color-dark-deep);
  --muted: var(--color-muted);
  --line: var(--color-line);
}

.beauty-page { --color-accent: #c85d7b; --color-accent-soft: #faedf1; }
.whatsapp-page { --color-accent: #0d6b51; --color-accent-soft: #e9f7f1; }
.instagram-page,
.viber-page { --color-accent: #5b36b7; --color-accent-soft: #f3edff; }
.hr-page { --color-accent: #167a69; --color-accent-soft: #e8f5ef; }
.loyalty-page { --color-accent: #5a4ff3; --color-accent-soft: #eeecff; }
.restaurant-page { --color-accent: #315b66; --color-accent-soft: #e8f0ed; }
.ecommerce-page { --color-accent: #c2551f; --color-accent-soft: #fff0e8; }
.dealer-page,
.logistics-page,
.voice-page { --color-accent: var(--color-primary); --color-accent-soft: var(--color-primary-soft); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; }
}