/* ============================================================
   ELYSIAN FALSE CEILING — TYPOGRAPHY
   Self-hosted font-face declarations + all type styles
   Section D.3
   ============================================================ */


/* ──────────────────────────────────────────
   @FONT-FACE — Cormorant Garamond (Heading)
   Files in /global-assets/fonts/
────────────────────────────────────────── */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ──────────────────────────────────────────
   @FONT-FACE — DM Sans (Body)
   Files in /global-assets/fonts/
────────────────────────────────────────── */

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ──────────────────────────────────────────
   BASE ELEMENT STYLES
────────────────────────────────────────── */

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-secondary);
}


/* ──────────────────────────────────────────
   HEADING ELEMENTS
────────────────────────────────────────── */

h1,
.h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2,
.h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3,
.h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.3;
}

h4,
.h4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: 500;
  line-height: 1.4;
}

h5,
.h5 {
  font-family: var(--font-body);
  font-size: var(--text-h5);
  font-weight: 500;
  line-height: 1.4;
}

h6,
.h6 {
  font-family: var(--font-body);
  font-size: var(--text-h6);
  font-weight: 500;
  line-height: 1.5;
}


/* ──────────────────────────────────────────
   BODY TEXT VARIANTS
────────────────────────────────────────── */

.text-body-lg {
  font-size: var(--text-body-lg);
  line-height: 1.7;
}

.text-body {
  font-size: var(--text-body);
  line-height: 1.7;
}

.text-body-sm {
  font-size: var(--text-body-sm);
  line-height: 1.6;
}

.text-caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ──────────────────────────────────────────
   DISPLAY TEXT (hero usage)
────────────────────────────────────────── */

.text-display {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}


/* ──────────────────────────────────────────
   EYEBROW TEXT
   Small caps, gold, DM Sans, letter-spaced
────────────────────────────────────────── */

.eyebrow,
.hero-eyebrow,
.section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}


/* ──────────────────────────────────────────
   LINKS
────────────────────────────────────────── */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

/* Inline text links */
.text-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-base), color var(--transition-base);
}

.text-link:hover {
  color: var(--color-accent-hover);
  text-decoration-color: currentColor;
}


/* ──────────────────────────────────────────
   PARAGRAPH DEFAULTS
────────────────────────────────────────── */

p {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-text-primary);
}

p + p {
  margin-top: var(--space-4);
}

/* Lead paragraph — used in section openers */
.lead {
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 680px;
}


/* ──────────────────────────────────────────
   BLOCKQUOTE / TESTIMONIAL QUOTE
────────────────────────────────────────── */

blockquote p,
.testimonial-quote p {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-primary);
}


/* ──────────────────────────────────────────
   COLOUR MODIFIERS FOR TEXT
────────────────────────────────────────── */

.text-light   { color: var(--color-text-light); }
.text-gold    { color: var(--color-accent); }
.text-muted   { color: var(--color-text-muted); }
.text-secondary-color { color: var(--color-text-secondary); }


/* ──────────────────────────────────────────
   DARK SECTION — TEXT COLOUR OVERRIDES
────────────────────────────────────────── */

.section-dark p,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6,
.section-dark .lead {
  color: var(--color-text-light);
}

.section-dark .section-eyebrow {
  color: var(--color-accent);
}

.section-dark .section-subtitle,
.section-dark p {
  color: rgba(255, 255, 255, 0.75);
}


/* ──────────────────────────────────────────
   RICH TEXT / ARTICLE CONTENT
   For blog posts and long-form content
────────────────────────────────────────── */

.rich-text h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-5);
}

.rich-text h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.rich-text h4 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.rich-text p {
  margin-bottom: var(--space-5);
}

.rich-text ul,
.rich-text ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
}

.rich-text ul {
  list-style: disc;
}

.rich-text ol {
  list-style: decimal;
}

.rich-text li {
  margin-bottom: var(--space-2);
  line-height: 1.7;
}

.rich-text strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

.rich-text em {
  font-style: italic;
}

.rich-text img {
  width: 100%;
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.rich-text figcaption {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  text-align: center;
}