@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root {
  --font-heading: 'Rajdhani', system-ui, sans-serif;
  --font-body: 'Rajdhani', system-ui, sans-serif;
  --font-ui: 'Rajdhani', system-ui, sans-serif;

  --heading-weight: 700;
  --body-weight: 400;
  --ui-weight: 400;

  --heading-tracking: 0;
  --heading-transform: uppercase;
  --body-tracking: 0;
  --body-line-height: 1.5;

  --text-base: 16px;

  --h1-size: 48px;
  --h2-size: 36px;
  --h3-size: 18px;
  --h4-size: 22px;

  /* Granular color variables */
  --color-h1: 0 0% 0%;
  --color-h2: 0 0% 0%;
  --color-h3: 0 0% 0%;
  --color-h4: 0 0% 0%;
  --color-body: 0 0% 0%;
  --color-body-muted: 0 0% 0%;
  --color-link: 0 0% 0%;
  --color-link-hover: 0 84% 60%;

  /* Promo section colors */
  --color-promo-title: #FFFFFF;
  --color-promo-subtitle: #E5E7EB;
  --color-promo-cta: #EF4444;

  /* Shorts shelf title color */
  --color-shorts-title: 0 0% 100%;

  /* News overlay title color */
  --color-news-overlay-title: 0 0% 100%;

  /* Section heading alias (matches --color-h2) */
  --color-section-heading: 0 0% 0%;

  /* Hero-specific variables */
  --hero-font: 'Rajdhani', system-ui, sans-serif;
  --hero-weight: 700;
  --hero-size: 110px;
  --hero-line-height: 0.7;
  --hero-tracking: 0;
  --hero-color: #FFFFFF;
  --hero-transform: uppercase;
  --hero-subtitle-size: 18px;
  --hero-subtitle-color: #E5E7EB;
  --hero-cta-color: #FFFFFF;

  /* Override theme variables */
  --foreground: 0 0% 0%;
  --muted-foreground: 0 0% 0%;
  --primary: 0 0% 0%;
}

/* Critical hero styles */
h2.hero-title,
.hero-title {
  font-family: var(--hero-font) !important;
  font-weight: var(--hero-weight) !important;
  font-size: var(--hero-size) !important;
  line-height: var(--hero-line-height) !important;
  letter-spacing: var(--hero-tracking) !important;
  text-transform: var(--hero-transform) !important;
  color: var(--hero-color) !important;
}

h2.hero-title.font-heading {
  color: var(--hero-color) !important;
}

.hero-subtitle {
  font-size: var(--hero-subtitle-size) !important;
  color: var(--hero-subtitle-color) !important;
}

.hero-cta {
  color: var(--hero-cta-color) !important;
  border-color: var(--hero-cta-color) !important;
}
.hero-cta:hover {
  background-color: var(--hero-cta-color) !important;
  color: var(--hero-bg-contrast, #000000) !important;
  border-color: var(--hero-cta-color) !important;
}

/* Element-level typography rules */
body {
  font-family: var(--font-body) !important;
  font-weight: var(--body-weight) !important;
  font-size: var(--text-base) !important;
  line-height: var(--body-line-height) !important;
  letter-spacing: var(--body-tracking) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  font-weight: var(--heading-weight) !important;
  letter-spacing: var(--heading-tracking) !important;
  text-transform: var(--heading-transform) !important;
}

h1 { font-size: var(--h1-size) !important; color: hsl(var(--color-h1)) !important; }
h2 { font-size: var(--h2-size) !important; color: hsl(var(--color-h2)) !important; }
h3 { font-size: var(--h3-size) !important; color: hsl(var(--color-h3)) !important; }
h4 { font-size: var(--h4-size) !important; color: hsl(var(--color-h4)) !important; }

p { color: hsl(var(--color-body)); }

a { color: hsl(var(--color-link)); }
a:hover { color: hsl(var(--color-link-hover)); }

.text-muted-foreground { color: hsl(var(--color-body-muted)) !important; }

/* Promo section isolation - override global heading colors */
[data-promo-section] h3 { color: var(--color-promo-title, #FFFFFF) !important; }
[data-promo-section] p { color: var(--color-promo-subtitle, #E5E7EB) !important; }
[data-promo-section] span { color: var(--color-promo-cta, #D4AF37) !important; }

/* Shorts shelf title isolation */
[data-shorts-shelf] h3 { color: hsl(var(--color-shorts-title)) !important; }

/* News overlay title isolation */
[data-news-overlay] h2,
[data-news-overlay] h3,
[data-news-overlay] .news-overlay-title { color: hsl(var(--color-news-overlay-title)) !important; }

/* Named Override: Youtube Shorts (scope: blog) */
[data-page="blog"] [data-shorts-shelf="true"] h2 { color: #000000 !important; }
/* Named Override: Paragraph Text Override (scope: info-terms) */
[data-page="info-terms"] [data-page="info-terms"] p { font-size: 120px !important; }

[data-page="blog"] {
  --heading-transform: uppercase;
  --h1-size: 30px;
  --h2-size: 24px;
  --color-h1: 0 0% 0%;
  --color-h2: 0 0% 100%;
  --color-h3: 0 0% 0%;
  --color-h4: 0 0% 0%;
  --color-body: 0 0% 0%;
}

@media (max-width: 1024px) {
  :root {
    --h1-size: 50px;
  }
}
@media (max-width: 640px) {
  :root {
    --h1-size: 54px;
    --text-base: 14px;
    --hero-size: 54px;
    --hero-subtitle-size: 16px;
  }
}