/*
 * clearargue.com — static tenant theme.
 * Бренд: критичне мислення / дебати / переконання. Настрій — "clear & bold":
 * heavy Inter-заголовки + Inter для тексту, vivid persuasion-orange акцент,
 * тепла cream-поверхня, charcoal dark-секції (за референсом ClearArgue.com.png).
 *
 * Усе — override семантичних токенів core'у (`src/styles/tokens/semantic.tokens.ts`).
 * Значення кольорів — 'r g b' триплети (щоб працювало `rgb(var(--color-…) / alpha)`).
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* — Typography — Inter для заголовків (heavy) і тексту (референс ClearArgue) — */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* — Brand accent — vivid persuasion orange (референс ClearArgue.com) — */
  --color-primary: 242 78 30; /* #F24E1E */
  --color-primary-fg: 255 255 255;

  /* — Secondary — warm amber «highlighter» для виділень — */
  --color-secondary: 245 158 11; /* #F59E0B amber-500 */
  --color-secondary-fg: 69 26 3; /* #451A03 amber-950 — читабельно на amber */

  /* — Surface stack — тепла cream-палітра (референс) — */
  --color-background: 245 242 235; /* теплий cream */
  --color-surface: 248 250 252; /* slate-50 */
  --color-surface-elevated: 255 255 255;
  --color-border: 226 232 240; /* slate-200 */
  --color-border-strong: 203 213 225; /* slate-300 */

  /* — Foreground — темний ink-текст — */
  --color-foreground: 30 41 59; /* slate-800 */
  --color-foreground-muted: 100 116 139; /* slate-500 */
  --color-heading: 15 23 42; /* slate-900 — гострі читабельні заголовки */

  /* — Site dark/vibrant — footer + dark-секції: near-black з Figma — */
  --color-site-deep: 13 13 13; /* #0D0D0D */
  --color-site-vibrant: 242 78 30; /* persuasion orange */

  /* — Membership tiers — висхідна indigo-шкала (basic→premium = світліший→авторитетніший) — */
  --color-tier-basic: 14 165 233; /* sky-500 */
  --color-tier-basic-deep: 3 105 161; /* sky-700 */
  --color-tier-medium: 99 102 241; /* indigo-500 */
  --color-tier-medium-deep: 67 56 202; /* indigo-700 */
  --color-tier-premium: 49 46 129; /* indigo-900 */
  --color-tier-premium-deep: 30 27 75; /* indigo-950 */

  /* — Радіуси — чіткі, professional (не pill, окрім badge) — */
  --radius-button: 0.5rem;
  --radius-input: 0.5rem;
  --radius-card: 1rem;
  --radius-dialog: 1rem;
  --radius-badge: 9999px;

  /* — Тіні — м'який indigo-tint на світлому — */
  --shadow-card: 0 4px 20px -8px rgba(79, 70, 229, 0.18);
  --shadow-card-hover: 0 14px 34px -12px rgba(79, 70, 229, 0.3);
  --shadow-button: 0 2px 10px -2px rgba(79, 70, 229, 0.35);
  --shadow-button-hover: 0 6px 18px -4px rgba(79, 70, 229, 0.5);
  --shadow-dropdown: 0 12px 32px -12px rgba(15, 23, 42, 0.2);
}

/* ─── Home-block custom styling (config `className`) ───────────────────────
 * ClearArgue — editorial: тонкий top-rule + serif-italic заголовки на
 * comparison-блоці (голос «structured argument»). */
.ca-rule {
  border-top: 2px solid rgb(var(--color-primary) / 0.45);
}
.ca-rule h2 {
  font-style: italic;
}

/* ─── heroStats — точкова кастомізація через hook-класи ─────────────────────
 * Кожен елемент блоку має стабільний клас. Скоуп через `.hero-stats …`
 * (специфічність (0,2,0)) надійно перебиває Tailwind-утиліти незалежно від
 * порядку завантаження CSS. Доступні hooks:
 *   .hero-stats__eyebrow · __title · __accent · __body · __cta
 *   .hero-stats__stats · __stat · __stat-value · __stat-label · __image
 * Підправляй наживо у /_sandbox → таба «Стилі». */

/* eyebrow-pill під макет: теплий subtle-бордер + читабельний gray */
.hero-stats .hero-stats__eyebrow {
  border-color: rgb(var(--color-primary) / 0.18);
  color: rgb(var(--color-primary) / 0.78);
}

/* ─── featureColumns — теплий «ghost»-номер під макет ─────────────────────── */
.feature-columns .feature-columns__marker {
  color: rgb(var(--color-foreground) / 0.14);
}

/* OFFER splitFeatures — теплий off-white; scoped до інстансу (.offer-band),
 * щоб НЕ перебити charcoal dark-band (інший splitFeatures на тій же сторінці). */
.split-features.offer-band {
  background: rgb(249 248 246);
}