/*
 * humanwiring.com — static tenant theme.
 * Бренд: поведінкова наука / «як ти влаштований». Настрій — "calm & evidence-based":
 * глибокий teal primary (моно-teal палітра), тепла cream-поверхня, near-black
 * dark-секції (за референсом HumanWiring.com.png). Акценти в заголовках — teal italic.
 *
 * Усе — override семантичних токенів core'у (`src/styles/tokens/semantic.tokens.ts`).
 * Значення кольорів — 'r g b' триплети (щоб працювало `rgb(var(--color-…) / alpha)`).
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* — Typography — Fraunces (soft-serif display, з italic-акцентами) + Inter (текст/UI) — */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  /* — Brand accent — deep teal (behavioural-science) — */
  --color-primary: 15 118 110; /* #0F766E teal-700 */
  --color-primary-fg: 255 255 255;

  /* — Secondary — теплий amber/ochre: другий акцент бренду (eyebrow-лейбли
     секцій, feature-іконки, аватари-pill). Тепла пара до teal-primary, за
     референсом. Справжній core-токен → доступний компонентам через
     `bg-secondary`/`text-secondary` (knob `avatarAccent`). — */
  --color-secondary: 202 138 60; /* #CA8A3C amber */
  --color-secondary-fg: 23 24 20; /* warm near-black — читабельно на amber */

  /* — Surface stack — тепла cream-палітра (референс) — */
  --color-background: 242 238 229; /* #F2EEE5 теплий cream */
  --color-surface: 250 247 240; /* #FAF7F0 warm off-white */
  --color-surface-elevated: 255 255 255;
  --color-border: 228 222 211; /* #E4DED3 warm light gray */
  --color-border-strong: 213 205 190; /* #D5CDBE */

  /* — Foreground — теплий dark-ink текст — */
  --color-foreground: 45 46 41; /* #2D2E29 */
  --color-foreground-muted: 112 113 103; /* #707167 */
  --color-heading: 23 24 20; /* #171814 warm near-black */

  /* — Site dark/vibrant — footer + dark-секції: near-black, vibrant = teal — */
  --color-site-deep: 15 16 14; /* #0F100E near-black */
  --color-site-vibrant: 13 148 136; /* #0D9488 teal-600 */

  /* — Membership tiers — висхідна teal-шкала (basic→premium = світліший→глибший) — */
  --color-tier-basic: 45 212 191; /* teal-400 */
  --color-tier-basic-deep: 13 148 136; /* teal-600 */
  --color-tier-medium: 13 148 136; /* teal-600 */
  --color-tier-medium-deep: 15 118 110; /* teal-700 */
  --color-tier-premium: 17 94 89; /* teal-800 */
  --color-tier-premium-deep: 19 78 74; /* teal-900 */

  /* — Радіуси — модерні, помірно округлі — */
  --radius-button: 0.625rem;
  --radius-input: 0.625rem;
  --radius-card: 1.25rem;
  --radius-dialog: 1.25rem;
  --radius-badge: 9999px;

  /* — Тіні — teal-tinted, modern — */
  --shadow-card: 0 6px 24px -10px rgba(15, 118, 110, 0.18);
  --shadow-card-hover: 0 16px 36px -12px rgba(15, 118, 110, 0.28);
  --shadow-button: 0 2px 12px -2px rgba(15, 118, 110, 0.35);
  --shadow-button-hover: 0 6px 18px -4px rgba(15, 118, 110, 0.5);
  --shadow-dropdown: 0 12px 32px -12px rgba(15, 16, 14, 0.22);
}

/* ─── Hero (heroStats) ─────────────────────────────────────────────────────
 * Eyebrow → teal uppercase pill; title-accent → teal italic Fraunces. */
.hero-stats .hero-stats__eyebrow {
  border-color: rgb(var(--color-primary) / 0.35);
  color: rgb(var(--color-primary));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6875rem;
  font-weight: 600;
}
.hero-stats .hero-stats__accent {
  font-style: italic;
  color: rgb(var(--color-primary));
}

/* ─── Pillars (featureColumns) ──────────────────────────────────────────────
 * Eyebrow → теплий amber; icon → amber у блідому amber-колі; заголовок секції
 * + заголовки колонок → Fraunces serif (за референсом). Body лишається Inter. */
.feature-columns .feature-columns__eyebrow {
  color: rgb(var(--color-secondary));
}
.feature-columns .feature-columns__title,
.feature-columns .feature-columns__item-title {
  font-family: var(--font-display);
}
.feature-columns .feature-columns__icon {
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.85rem;
  border-radius: 9999px;
  color: rgb(var(--color-secondary));
  background: rgb(var(--color-secondary) / 0.13);
}

/* ─── Offer (splitFeatures) ─────────────────────────────────────────────────
 * Eyebrow → amber; заголовок секції → Fraunces; title-accent → teal italic.
 * Заголовки list-айтемів лишаються Inter (за референсом). Dash-маркери — teal
 * (дефолт компонента). */
.split-features .split-features__eyebrow {
  color: rgb(var(--color-secondary));
}
.split-features .split-features__title {
  font-family: var(--font-display);
}
.split-features .split-features__title-accent {
  font-style: italic;
}

/* ─── Dark band (splitFeatures deep, .hw-lesson-band) ───────────────────────
 * На near-black: eyebrow + title-accent → яскравий teal (перебиває глобальний
 * amber-eyebrow / компонентний white-50 accent); dot-маркери → amber; list-
 * айтеми → regular light-gray (компонент дає bold white). Іде ПІСЛЯ глобальних
 * `.split-features` правил, щоб виграти на рівній специфічності. */
.hw-lesson-band .split-features__eyebrow,
.hw-lesson-band .split-features__title-accent {
  color: rgb(45 212 191); /* teal-400 — яскравий на темному */
}
.hw-lesson-band .split-features__marker {
  background-color: rgb(var(--color-secondary));
}
.hw-lesson-band .split-features__item-title {
  font-weight: 400;
  color: rgb(255 255 255 / 0.75);
}

/* ─── Format cards (featureCards) ───────────────────────────────────────────
 * Eyebrow → amber; заголовок секції + заголовки карток → Fraunces serif;
 * title-accent → teal italic. Картки — легка elevation. Іконки лишаються teal
 * (дефолт компонента). */
.feature-cards .feature-cards__eyebrow {
  color: rgb(var(--color-secondary));
}
.feature-cards .feature-cards__title,
.feature-cards .feature-cards__card-title {
  font-family: var(--font-display);
}
.feature-cards .feature-cards__title-accent {
  font-style: italic;
}
.feature-cards .feature-cards__card {
  box-shadow: var(--shadow-card);
}

/* ─── Testimonials ──────────────────────────────────────────────────────────
 * Eyebrow + quote-mark → amber; заголовок секції → Fraunces; title-accent →
 * teal italic. Аватари-pill і чергування teal/amber керуються knob'ами
 * `avatarShape`/`avatarAccent` у config (через `bg-secondary`/`text-secondary`),
 * editorial-цитата — knob `quoteVariant` — тут CSS не потрібен. */
.testimonials .testimonials__eyebrow,
.testimonials .testimonials__quote-mark {
  color: rgb(var(--color-secondary));
}
.testimonials .testimonials__title {
  font-family: var(--font-display);
}
.testimonials .testimonials__title-accent {
  font-style: italic;
}

/* ─── Home-block custom styling (config `className`) ───────────────────────
 * HumanWiring — neural-grid фон (техно/«схема мозку»), тепер teal-tinted. */
.hw-grid {
  background-image:
    linear-gradient(rgb(var(--color-primary) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--color-primary) / 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}