/*
 * typography.css — Three-font system
 * Grailsome Design System — Section 3 (scale tokens live in tokens.css;
 * the Google Fonts stylesheet is linked from the layouts)
 */

body {
  font-family: 'Sora', sans-serif;
  font-weight: 300;
  font-size: var(--text-app-body);
  line-height: 1.6;
}

/* -------------------------------------------------------
   Utility classes
------------------------------------------------------- */

/* Display — Bebas Neue */
.text-display {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* Accent Serif — Fraunces italic */
.text-accent {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* UI Label — Sora 500 uppercase */
.text-label {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Micro — Sora 400 small */
.text-micro {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: var(--text-micro);
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------
   Heading composition pattern
   Usage:
     <h2 class="heading-composed">
       <span class="heading-composed__top">FIND YOUR</span>
       <span class="heading-composed__bottom">Grail<span class="period">.</span></span>
     </h2>
------------------------------------------------------- */

.heading-composed {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.heading-composed__top {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: var(--text-hero-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.heading-composed__bottom {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 900;
  font-size: var(--text-hero-xl);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.period {
  color: var(--color-amber);
}

/* -------------------------------------------------------
   App-scale heading composition
   Smaller variant for in-app screens (not marketing)
   Usage:
     <h1 class="heading-composed--app">
       <span class="heading-composed--app__top">MY COLLECTION</span>
       <span class="heading-composed--app__bottom">Your Grails<span class="period">.</span></span>
     </h1>
------------------------------------------------------- */

.heading-composed--app {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: var(--space-1);
}

.heading-composed--app--centered {
  text-align: center;
  align-items: center;
}

.heading-composed--app__top {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-app-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.heading-composed--app__bottom {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--color-ink-2);
}

/* Section-level composed heading (smaller, for "THE STORY", etc.) */
.heading-composed--section {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
  margin-bottom: var(--space-4);
}

.heading-composed--section__top {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heading-composed--section__bottom {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--color-ink-muted);
}