/* 
 * ProDocs Design System
 * Based on Master Document Part One
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;700&display=swap');

:root {
  /* Color Palette */
  --pd-ink-navy: #0C1F33; /* Primary text, dark hero sections, footer */
  --pd-paper: #F7F8F6; /* Page background */
  --pd-signal-red: #C4293A; /* CTAs, pulse motif, critical alerts */
  --pd-oxygen-teal: #0E6E57; /* Compliance, certifications, trust markers */
  --pd-steel: #6B7686; /* Secondary text, captions, muted labels */
  --pd-mist: #E8EAE5; /* Card backgrounds, hairline dividers */

  /* Typography Families */
  --font-display: 'Fraunces', serif; /* Headlines only */
  --font-body: 'IBM Plex Sans', sans-serif; /* Functional text */
  --font-data: 'IBM Plex Mono', monospace; /* Stats and figures */
}

/* Base resets based on Design System */
body {
  background-color: var(--pd-paper);
  color: var(--pd-ink-navy);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
}

/* Type Scale - Desktop First */
h1, .hero-title {
  font-family: var(--font-display);
  font-size: 64px; /* 60-68px */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em; /* Tight tracking */
  color: var(--pd-ink-navy);
}

h2, .section-title {
  font-family: var(--font-display);
  font-size: 40px; /* 38-42px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pd-ink-navy);
}

h3, .subsection-title {
  font-family: var(--font-display);
  font-size: 25px; /* 24-26px */
  font-weight: 600;
  line-height: 1.25;
  color: var(--pd-ink-navy);
}

.body-large {
  font-family: var(--font-body);
  font-size: 19px; /* 18-19px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--pd-ink-navy);
}

.caption {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--pd-steel);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px; /* 12-13px */
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pd-steel);
}

.stat-numeral {
  font-family: var(--font-data);
  font-size: 58px; /* 44-72px */
  font-weight: 600;
  line-height: 1.0;
  color: var(--pd-ink-navy);
}

/* Mobile Type Scale */
@media (max-width: 768px) {
  h1, .hero-title {
    font-size: 38px; /* 36-40px */
  }
  h2, .section-title {
    font-size: 28px;
  }
  h3, .subsection-title {
    font-size: 21px;
  }
  .body-large {
    font-size: 16px;
  }
  body {
    font-size: 15px;
  }
  .caption {
    font-size: 12.5px;
  }
  .eyebrow {
    font-size: 11.5px;
  }
  .stat-numeral {
    font-size: 36px; /* 32-40px */
  }
}

/* Signature Element - Pulse Line */
.pulse-line {
  width: 100%;
  height: 2px;
  background-color: var(--pd-signal-red);
  margin: 40px 0;
  position: relative;
  /* Can add an SVG repeating background later if we want an actual waveform */
}

/* Utility classes */
.bg-paper { background-color: var(--pd-paper); }
.bg-ink-navy { background-color: var(--pd-ink-navy); color: var(--pd-paper); }
.bg-mist { background-color: var(--pd-mist); }

.text-ink-navy { color: var(--pd-ink-navy) !important; }
.text-steel { color: var(--pd-steel) !important; }
.text-signal-red { color: var(--pd-signal-red) !important; }
.text-oxygen-teal { color: var(--pd-oxygen-teal) !important; }
.text-mist { color: var(--pd-mist) !important; }
.text-paper { color: var(--pd-paper) !important; }

/* Buttons & Hovers */
.btn-signal-red {
  background-color: var(--pd-signal-red);
  color: var(--pd-paper);
  border: 1px solid var(--pd-signal-red);
  border-radius: 0;
  transition: all 0.2s ease-in-out;
}
.btn-signal-red:hover {
  background-color: #a32230; /* darker red */
  color: var(--pd-paper);
}

.btn-outline-steel {
  background-color: transparent;
  color: var(--pd-steel);
  border: 1px solid var(--pd-steel);
  border-radius: 0;
  transition: all 0.2s ease-in-out;
}
.btn-outline-steel:hover {
  border-color: var(--pd-paper);
  color: var(--pd-paper);
}

.border-steel { border-color: var(--pd-steel) !important; }
.border-mist { border-color: var(--pd-mist) !important; }

.hover-red:hover { color: var(--pd-signal-red) !important; }
.hover-white:hover { color: var(--pd-paper) !important; }