@font-face {
  font-family: 'Bebas Neue';
  src: url('/assets/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/assets/fonts/Oswald-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/assets/fonts/Oswald-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-obsidian: #0b0b0d;
  --brand-off-white: #f5f4f0;
  --brand-signal: #e63946;
  --brand-signal-on-light: #b8222d;
  --brand-signal-on-dark: #ff4d5c;
  --brand-signal-cta: #c72532;
  --brand-signal-cta-hover: #a91624;
  --brand-graphite: #2a2d34;
  --brand-steel: #8a8f98;

  --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --primary: var(--brand-signal);
  --primary-strong: #ff4d5c;
  --primary-on-light: var(--brand-signal-on-light);
  --primary-on-dark: var(--brand-signal-on-dark);
  --primary-cta: var(--brand-signal-cta);
  --primary-cta-hover: var(--brand-signal-cta-hover);
  --secondary: var(--brand-graphite);
  --accent: var(--brand-signal);
  --success: var(--brand-off-white);
  --warning: var(--brand-signal);
  --bg-dark: var(--brand-obsidian);
  --bg-light: var(--brand-off-white);
  --bg-surface: #141416;
  --text-light: var(--brand-off-white);
  --text-dark: var(--brand-obsidian);
  --text-soft: #d9d7d0;
  --text-muted: var(--brand-steel);
  --card-bg: rgba(245, 244, 240, 0.06);
  --card-bg-strong: rgba(245, 244, 240, 0.1);
  --card-border: rgba(245, 244, 240, 0.16);
  --glass-bg: rgba(245, 244, 240, 0.06);
  --glass-border: rgba(245, 244, 240, 0.16);
  --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.24);
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --nav-height: 78px;
}

html {
  background: var(--brand-obsidian);
}

body {
  font-family: var(--font-body);
}

:where(h1, h2, h3, .section-title, .hero-title, .pricing-card h3, .footer-title, .blog-home-hero h1, .article-hero h1) {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:where(.hero-badge, .article-discovery__eyebrow, .blog-featured__eyebrow, .popular-badge, .premium-badge, .bilan-lead-badge, .chip, .tag-pill, .meta) {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(a, button, input, select, textarea) {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--brand-signal);
  outline-offset: 3px;
}