/*
 * strengthscript.com — static tenant theme.
 * Бренд: дисципліна / силові тренування / стійкість — «script», за яким будуєш силу.
 * Настрій — "bold & athletic": енергійний blaze-orange primary з volt-lime іскрою,
 * потужний condensed Oswald для заголовків + міцний Barlow для тексту, crisp
 * нейтральні поверхні, гострі industrial радіуси.
 *
 * Усе — override семантичних токенів core'у (`src/styles/tokens/semantic.tokens.ts`).
 * Значення кольорів — 'r g b' триплети (щоб працювало `rgb(var(--color-…) / alpha)`).
 */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&display=swap");

:root {
  /* — Typography — потужний condensed display + міцний athletic sans — */
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Oswald", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — Brand accent — blaze orange (енергія / драйв) — */
  --color-primary: 234 88 12; /* #EA580C orange-600 */
  --color-primary-fg: 255 255 255;

  /* — Secondary — volt lime «spark» — */
  --color-secondary: 132 204 22; /* #84CC16 lime-500 */
  --color-secondary-fg: 26 46 5; /* #1A2E05 lime-950 — читабельно на lime */

  /* — Surface stack — crisp нейтрально-холодна палітра — */
  --color-background: 250 251 252; /* cool white */
  --color-surface: 243 244 246; /* gray-100 */
  --color-surface-elevated: 255 255 255;
  --color-border: 229 231 235; /* gray-200 */
  --color-border-strong: 209 213 219; /* gray-300 */

  /* — Foreground — індустріальний charcoal — */
  --color-foreground: 24 24 27; /* zinc-900 */
  --color-foreground-muted: 82 82 91; /* zinc-600 */
  --color-heading: 17 24 39; /* #111827 strong near-black */

  /* — Site dark/vibrant — footer + dark-секції індустріально-чорні — */
  --color-site-deep: 24 24 27; /* charcoal-black */
  --color-site-vibrant: 249 115 22; /* #F97316 orange-500 */

  /* — Membership tiers — енергійна orange→red→black «forge» шкала — */
  --color-tier-basic: 249 115 22; /* orange-500 */
  --color-tier-basic-deep: 234 88 12; /* orange-600 */
  --color-tier-medium: 220 38 38; /* red-600 */
  --color-tier-medium-deep: 185 28 28; /* red-700 */
  --color-tier-premium: 39 39 42; /* zinc-800 forged black */
  --color-tier-premium-deep: 24 24 27; /* zinc-900 */

  /* — Радіуси — гострі, industrial (tag-style badge) — */
  --radius-button: 0.375rem;
  --radius-input: 0.375rem;
  --radius-card: 0.625rem;
  --radius-dialog: 0.75rem;
  --radius-badge: 0.375rem;

  /* — Тіні — потужні, orange-tinted — */
  --shadow-card: 0 4px 18px -8px rgba(234, 88, 12, 0.2);
  --shadow-card-hover: 0 12px 28px -10px rgba(234, 88, 12, 0.32);
  --shadow-button: 0 2px 10px -2px rgba(234, 88, 12, 0.45);
  --shadow-button-hover: 0 5px 16px -3px rgba(234, 88, 12, 0.6);
  --shadow-dropdown: 0 10px 28px -10px rgba(24, 24, 27, 0.25);
}

/* ─── Home blocks — hook-class overrides ───────────────────────────────────
 * Двоакцентна палітра: blaze-orange (primary, дефолт) — eyebrow + title-accents +
 * CTA; volt-lime (secondary) — «іскра» на charcoal dark band. Заголовки секцій →
 * Oswald (font-display) для poster-настрою — генерик-блоки за замовч. НЕ
 * font-display, тому tenant-scoped. */

/* Hero — eyebrow = orange industrial pill (sharp, uppercase, Oswald). */
.hero-stats .hero-stats__eyebrow {
  border-color: rgb(var(--color-primary) / 0.35);
  background: rgb(var(--color-primary) / 0.08);
  color: rgb(var(--color-primary));
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Заголовки секцій + заголовки колонок/карток → Oswald (за брендом). Старі блоки
 * (comparison/guarantee) не мають hook-класів → таргет по `h2` через `className`. */
.feature-columns .feature-columns__title,
.feature-columns .feature-columns__item-title,
.split-features .split-features__title,
.feature-cards .feature-cards__title,
.feature-cards .feature-cards__card-title,
.testimonials .testimonials__title,
.ss-compare h2,
.ss-guarantee h2 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

/* Pillars — іконка в блідому orange-тайлі (sharp, industrial badge). */
.feature-columns .feature-columns__icon {
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.75rem;
  border-radius: var(--radius-button);
  color: rgb(var(--color-primary));
  background: rgb(var(--color-primary) / 0.12);
}

/* Modules (featureCards.ss-modules) — крихта cool-gray fill на білій секції. */
.ss-modules .feature-cards__card {
  background: rgb(var(--color-surface));
  border-color: rgb(var(--color-border));
}

/* Final CTA (.ss-final) — на charcoal-band eyebrow → volt-lime «іскра»
 * (єдиний темний фон сторінки; перебиває компонентний orange text-primary). */
.ss-final .uppercase {
  color: rgb(var(--color-secondary));
}