/* =========================================
   DATAFACE TYPOGRAPHY SYSTEM (2025)
   Inspired by Vercel's modern approach
   ========================================= */

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

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

:root {
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', monospace;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Typography Colors */
  --text-primary: #000814;        /* Off-black blue for headers (from brand) */
  --text-secondary: #525252;      /* Medium grey for body text */
  --text-tertiary: #737373;       /* Lighter grey for captions */
  --text-inverse: #ffffff;        /* White for dark backgrounds */

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
}

/* =========================================
   BASE STYLES
   ========================================= */

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  font-weight: var(--font-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   HEADINGS - Strong Black Typography
   ========================================= */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: 0;
  margin-bottom: 0.5em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-weight-black);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

h4 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: var(--font-weight-semibold);
}

h5 {
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold);
}

h6 {
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =========================================
   BODY TEXT
   ========================================= */

p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* Lead paragraph (intro text) */
.lead {
  font-size: 1.25rem;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  font-weight: var(--font-weight-normal);
}

/* Small text */
small, .text-sm {
  font-size: 0.875rem;
  line-height: var(--leading-normal);
}

/* Extra small text */
.text-xs {
  font-size: 0.75rem;
  line-height: var(--leading-normal);
}

/* Large text */
.text-lg {
  font-size: 1.125rem;
  line-height: var(--leading-relaxed);
}

/* Extra large text */
.text-xl {
  font-size: 1.25rem;
  line-height: var(--leading-relaxed);
}

/* =========================================
   DISPLAY TEXT (Hero Headlines)
   ========================================= */

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  color: var(--text-primary);
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Override Bootstrap display classes for 2025 style */
.display-1 {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.display-2 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.display-3 {
  font-size: clamp(2.25rem, 4.5vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.display-4 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.display-5 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.display-6 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* =========================================
   TEXT COLORS
   ========================================= */

.text-primary-color {
  color: var(--text-primary) !important;
}

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

.text-tertiary {
  color: var(--text-tertiary) !important;
}

/* =========================================
   FONT WEIGHTS
   ========================================= */

.fw-normal {
  font-weight: var(--font-weight-normal) !important;
}

.fw-medium {
  font-weight: var(--font-weight-medium) !important;
}

.fw-semibold {
  font-weight: var(--font-weight-semibold) !important;
}

.fw-bold {
  font-weight: var(--font-weight-bold) !important;
}

.fw-extrabold {
  font-weight: var(--font-weight-extrabold) !important;
}

.fw-black {
  font-weight: var(--font-weight-black) !important;
}

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

a {
  color: var(--navy-deep);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--navy-light);
  text-decoration: underline;
}

/* =========================================
   LISTS
   ========================================= */

ul, ol {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: 1.25rem;
}

li {
  margin-bottom: 0.5rem;
}

/* Unstyled lists */
.list-unstyled li {
  margin-bottom: 0.75rem;
}

/* =========================================
   BLOCKQUOTES
   ========================================= */

blockquote {
  border-left: 4px solid var(--navy-deep);
  padding-left: 1.5rem;
  margin: 2rem 0;
  color: var(--text-secondary);
  font-size: 1.125rem;
  line-height: var(--leading-relaxed);
  font-style: italic;
}

/* =========================================
   CODE & PRE
   ========================================= */

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: #f4f4f5;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  color: var(--text-primary);
}

pre {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: var(--leading-relaxed);
  background: #fafafa;
  padding: 1.5rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

pre code {
  background: none;
  padding: 0;
}

/* =========================================
   STRONG & EMPHASIS
   ========================================= */

strong, b {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

em, i {
  font-style: italic;
}

/* =========================================
   UTILITY CLASSES
   ========================================= */

/* Tight line height for headlines */
.leading-tight {
  line-height: var(--leading-tight);
}

.leading-normal {
  line-height: var(--leading-normal);
}

.leading-relaxed {
  line-height: var(--leading-relaxed);
}

/* Tight letter spacing for large text */
.tracking-tight {
  letter-spacing: var(--tracking-tight);
}

.tracking-normal {
  letter-spacing: var(--tracking-normal);
}

.tracking-wide {
  letter-spacing: var(--tracking-wide);
}

/* Text balance for headlines */
.text-balance {
  text-wrap: balance;
}

/* =========================================
   RESPONSIVE ADJUSTMENTS
   ========================================= */

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  .lead {
    font-size: 1.125rem;
  }

  h1 {
    line-height: 1.15;
  }
}

/* =========================================
   DARK MODE SUPPORT (Disabled - site uses light backgrounds)
   ========================================= */

/* Commented out to prevent white text on light backgrounds
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --text-tertiary: #737373;
  }
}
*/