/*
 * =========================================================
 * OLYTIC SOLUTIONS - Typographic Scale
 * typography.css
 *
 * Defines the full H1–H6 + body hierarchy aligned with
 * the brand spec: DM Sans (headings & body), DM Mono
 * (labels/metadata), Gold (#C8A96E) accent rule under
 * every section title.
 *
 * Requires: tokens.css loaded first.
 * =========================================================
 */

/* ─── Base Reset ────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Document Base ─────────────────────────────────────── */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);        /* 18px - brand body floor */
  font-weight: var(--weight-regular);
  line-height: var(--leading-body); /* 1.65 - brand spec */
  color: var(--text-body);
  background-color: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Heading Hierarchy ─────────────────────────────────── */
/*
 * Brand spec:
 *   - DM Sans Bold
 *   - Obsidian (#1A1A1A) or Navy (#1B2A4A) - never arbitrary color
 *   - No all-caps on headings
 *   - Max two DM Sans weights per context
 *   - Gold rule line (1px #C8A96E) beneath section titles
 *     - apply .section-title or .has-rule to trigger it
 */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);       /* Obsidian by default */
  max-width: 72ch;                  /* Prevent overly long headline wrapping */
}

/* H1 - Hero / Page Title */
h1 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));  /* 36px → 60px */
  line-height: var(--leading-snug);
  letter-spacing: -0.03em;
}

/* H2 - Section Heading (most common) */
h2 {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));  /* 30px → 48px */
  line-height: var(--leading-snug);
  letter-spacing: -0.025em;
}

/* H3 - Sub-section Heading */
h3 {
  font-size: clamp(var(--text-xl), 2.2vw, var(--text-3xl)); /* 24px → 36px */
  line-height: 1.3;
}

/* H4 - Card Heading / Feature Title */
h4 {
  font-size: clamp(var(--text-lg), 1.8vw, var(--text-2xl)); /* 20px → 30px */
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* H5 - Small Heading / Callout Title */
h5 {
  font-size: var(--text-xl);   /* 24px - fixed */
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

/* H6 - Smallest Heading / Table Caption */
h6 {
  font-size: var(--text-lg);   /* 20px - fixed */
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

/* ── Navy variant for section-level headings ── */
h2.navy, h3.navy { color: var(--color-navy); }

/* ─── Gold Rule - Brand Signature ──────────────────────── */
/*
 * The gold rule (1px #C8A96E horizontal line) beneath every
 * section title is the primary visual signature per brand spec.
 * Apply .section-title to any heading that needs the rule.
 *
 * Also available as the utility class .has-rule for flexibility.
 */

.section-title,
.has-rule {
  position: relative;
  padding-bottom: var(--space-4);
}

.section-title::after,
.has-rule::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3rem;          /* Short gold rule - accent, not underline */
  height: 1px;
  background-color: var(--color-gold);
}

/* Full-width gold rule variant for major section breaks */
.section-title--full::after,
.has-rule--full::after {
  width: 100%;
}

/* ─── Section Labels (DM Mono) ──────────────────────────── */
/*
 * Brand spec: DM Mono, uppercase, Gold, letter-spacing 0.1em
 * Use for numbered section identifiers: "01", "02", etc.
 * and for eyebrow labels above headings.
 * Never use DM Mono in body copy.
 */

.label,
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-gold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-3);
}

/* Teal label variant - for brand identifier */
.label--teal {
  color: var(--color-teal);
}

/* Muted label - for metadata, captions */
.label--muted {
  color: var(--color-muted);
}

/* ─── Body Copy ─────────────────────────────────────────── */

p {
  margin-bottom: var(--space-5);
  max-width: 68ch;     /* Optimal reading width per typography best practice */
}

p:last-child {
  margin-bottom: 0;
}

/* Large body - intro paragraphs, lead text */
.text-lead {
  font-size: var(--text-xl);      /* 24px */
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  color: var(--text-body);
}

/* Small body - captions, footnotes */
.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* Muted text */
.text-muted { color: var(--text-muted); }

/* ─── Inline Elements ───────────────────────────────────── */

strong, b {
  font-weight: var(--weight-bold);
  color: var(--text-primary);     /* Bold text snaps to Obsidian */
}

em, i {
  font-style: italic;
}

/* Inline code / mono snippet - not DM Mono body rule, this is inline */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-surface);
  color: var(--color-teal);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* ─── Links ─────────────────────────────────────────────── */

a {
  color: var(--color-teal);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}

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

/* Unstyled link (nav, buttons) */
a.no-underline {
  text-decoration: none;
}

/* ─── Lists ─────────────────────────────────────────────── */

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

li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-body);
}

li:last-child {
  margin-bottom: 0;
}

/* ─── Blockquote / Callout Quote ────────────────────────── */

blockquote {
  border-left: var(--border-gold-thick);
  background-color: var(--color-surface);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-8) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p {
  font-size: var(--text-lg);
  color: var(--color-navy);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  margin-bottom: 0;
}

/* ─── On-Dark Typography ─────────────────────────────────── */
/*
 * Apply .on-dark to any dark-background section.
 * Headings, body, and labels automatically invert.
 */

.on-dark {
  color: var(--text-on-dark);
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5,
.on-dark h6 {
  color: #FFFFFF;
}

.on-dark p,
.on-dark li {
  color: rgba(255, 255, 255, 0.85);
}

.on-dark .text-muted {
  color: rgba(255, 255, 255, 0.55);
}

.on-dark strong {
  color: #FFFFFF;
}

/* ─── Utility Typography Classes ────────────────────────── */

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

.font-mono    { font-family: var(--font-mono); }
.font-bold    { font-weight: var(--weight-bold); }
.font-medium  { font-weight: var(--weight-medium); }

.text-obsidian  { color: var(--color-obsidian); }
.text-navy      { color: var(--color-navy); }
.text-gold      { color: var(--color-gold); }
.text-teal      { color: var(--color-teal); }
.text-body      { color: var(--color-body-steel); }

/* ─── Responsive Type Adjustments ──────────────────────── */

@media (max-width: 768px) {
  body {
    font-size: var(--text-base);  /* Drop to 16px on mobile */
  }

  h1 {
    letter-spacing: -0.02em;
  }

  p {
    max-width: 100%;
  }

  blockquote {
    padding: var(--space-5) var(--space-6);
  }
}