/* ===========================================
   STUDIO SOLEN — Typography
   Brand Identity v1.1 (LOCKED)
   =========================================== */

/* ===== GOOGLE FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ===== BASE TYPOGRAPHY ===== */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

/* ===== HEADINGS ===== */

/* H1 — Hero Headlines Only (Playfair Display) */
h1 {
  font-family: var(--font-h1);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

/* H2 — Section Titles (Cormorant Garamond) */
h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

/* H3 — Subsections (Cormorant Garamond) */
h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

/* H4 — Rare, supporting */
h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

/* ===== DESKTOP HEADING SIZES ===== */

@media (min-width: 768px) {
  h1 {
    font-size: var(--text-5xl);
  }
  
  h2 {
    font-size: var(--text-3xl);
  }
  
  h3 {
    font-size: var(--text-2xl);
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: var(--text-6xl);
  }
}

/* ===== BODY TEXT (Libre Baskerville) ===== */

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

/* Editorial Text — For longer content/storytelling */
.editorial {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}

@media (min-width: 768px) {
  .editorial {
    font-size: var(--text-xl);
  }
}

/* ===== UI TEXT (Inter) ===== */

.ui-text {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ===== TEXT UTILITIES ===== */

/* Colors */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-accent {
  color: var(--color-accent);
}

/* Sizes */
.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base {
  font-size: var(--text-base);
}

.text-lg {
  font-size: var(--text-lg);
}

/* Weights */
.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

/* Alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* ===== LINKS ===== */

a {
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-text-primary);
}

/* Underlined links */
.link-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===== SPECIAL TEXT STYLES ===== */

/* Lead paragraph */
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Small/fine print */
.small,
small {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Italic emphasis */
em,
.italic {
  font-style: italic;
}

/* Strong emphasis */
strong,
.bold {
  font-weight: 600;
}