/* ============================================================
   SOLARA INVESTMENT — Base Styles & Typography
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-dark);
  background-color: var(--color-deep);
  line-height: var(--leading-normal);
}

/* Arabic font has better line height */
:lang(ar) body,
[dir="rtl"] body {
  line-height: var(--leading-relaxed);
}

/* === HEADINGS === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  font-weight: 700;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }

/* === PARAGRAPH === */
p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: inherit;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

/* === EYEBROW LABELS === */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-emerald);
  display: inline-block;
}

/* Arabic eyebrow — no uppercase transform (doesn't apply to Arabic) */
[dir="rtl"] .eyebrow {
  letter-spacing: 0.06em;
}

/* === GRADIENT TEXT (Emerald → Gold) === */
.text-gradient {
  background: linear-gradient(135deg, var(--color-emerald) 0%, var(--color-gold-light) 60%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === MONO NUMBERS === */
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* === DECORATIVE RULE === */
.rule {
  display: block;
  width: 3rem;
  height: 2px;
  background: linear-gradient(90deg, var(--color-emerald), var(--color-gold));
  margin-bottom: var(--space-6);
}

.rule--center {
  margin-inline: auto;
}

/* === SECTION THEMES === */

.section--dark {
  background-color: var(--color-deep);
  color: var(--color-text-primary);
}
.section--dark p {
  color: var(--color-text-secondary);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-text-primary);
}

.section--night {
  background-color: var(--color-night);
  color: var(--color-text-primary);
}
.section--night p {
  color: var(--color-text-secondary);
}
.section--night h1,
.section--night h2,
.section--night h3,
.section--night h4 {
  color: var(--color-text-primary);
}

.section--light {
  background-color: var(--color-light);
  color: var(--color-text-dark);
}
.section--light p {
  color: var(--color-text-dark-muted);
}

.section--surface {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}
.section--surface p {
  color: var(--color-text-secondary);
}
.section--surface h1,
.section--surface h2,
.section--surface h3 {
  color: var(--color-text-primary);
}

/* === SELECTION === */
::selection {
  background-color: var(--color-emerald);
  color: var(--color-night);
}