/**
 * Apple-Inspired Typography System
 * Based on Apple's SF Pro Display and SF Pro Text design language
 * Implements fluid typography with consistent scale and hierarchy
 */

:root {
  /* ============================================
     FONT FAMILIES - Apple System Stack
     ============================================ */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Monaco", "Cascadia Code", "Courier New", monospace;

  /* ============================================
     BASE FONT SETTINGS
     ============================================ */
  --font-base-size: 16px;
  --font-base-weight: 400;
  --font-base-line-height: 1.5;

  /* ============================================
     FONT WEIGHTS - Apple SF Pro Scale
     ============================================ */
  --font-weight-thin: 100;
  --font-weight-ultralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;

  /* ============================================
     FLUID TYPOGRAPHIC SCALE
     Using clamp() for responsive scaling
     Format: clamp(min, preferred, max)
     ============================================ */

  /* Display Sizes - For hero sections and major headlines */
  --font-size-display-large: clamp(3.5rem, 8vw + 1rem, 6rem);
  /* 56px → 96px */
  --font-size-display: clamp(2.75rem, 6vw + 1rem, 4.5rem);
  /* 44px → 72px */
  --font-size-display-small: clamp(2.25rem, 5vw + 0.5rem, 3.5rem);
  /* 36px → 56px */

  /* Headline Sizes - For section titles and important headings */
  --font-size-headline-1: clamp(2rem, 4vw + 0.5rem, 3rem);
  /* 32px → 48px */
  --font-size-headline-2: clamp(1.75rem, 3.5vw + 0.5rem, 2.5rem);
  /* 28px → 40px */
  --font-size-headline-3: clamp(1.5rem, 3vw + 0.25rem, 2.125rem);
  /* 24px → 34px */

  /* Title Sizes - For card titles and subsections */
  --font-size-title-1: clamp(1.375rem, 2.5vw + 0.25rem, 1.75rem);
  /* 22px → 28px */
  --font-size-title-2: clamp(1.25rem, 2vw + 0.25rem, 1.5rem);
  /* 20px → 24px */
  --font-size-title-3: clamp(1.125rem, 1.5vw + 0.25rem, 1.375rem);
  /* 18px → 22px */

  /* Body Text Sizes - For content and descriptions */
  --font-size-body-large: clamp(1.125rem, 1.5vw + 0.125rem, 1.25rem);
  /* 18px → 20px */
  --font-size-body: clamp(1rem, 1vw + 0.125rem, 1.0625rem);
  /* 16px → 17px */
  --font-size-body-small: clamp(0.9375rem, 0.75vw + 0.125rem, 1rem);
  /* 15px → 16px */

  /* Supporting Text Sizes - For captions and metadata */
  --font-size-caption-1: clamp(0.875rem, 0.5vw + 0.125rem, 0.9375rem);
  /* 14px → 15px */
  --font-size-caption-2: clamp(0.8125rem, 0.5vw + 0.0625rem, 0.875rem);
  /* 13px → 14px */
  --font-size-footnote: clamp(0.75rem, 0.5vw + 0.0625rem, 0.8125rem);
  /* 12px → 13px */

  /* ============================================
     LINE HEIGHTS - Optimized for readability
     ============================================ */
  --line-height-tight: 1.1;
  /* For large displays */
  --line-height-snug: 1.25;
  /* For headlines */
  --line-height-normal: 1.5;
  /* For body text */
  --line-height-relaxed: 1.625;
  /* For large body text */
  --line-height-loose: 1.75;
  /* For extra spacing */

  /* ============================================
     LETTER SPACING - Apple-style tracking
     ============================================ */
  --letter-spacing-tight: -0.02em;
  /* For large text */
  --letter-spacing-normal: 0;
  /* For body text */
  --letter-spacing-wide: 0.01em;
  /* For small text */
  --letter-spacing-wider: 0.025em;
  /* For uppercase labels */
  --letter-spacing-widest: 0.05em;
  /* For all-caps text */

  /* ============================================
     PARAGRAPH SPACING
     ============================================ */
  --paragraph-spacing-tight: 0.75em;
  --paragraph-spacing-normal: 1em;
  --paragraph-spacing-relaxed: 1.5em;
}

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

body {
  font-family: var(--font-text);
  font-size: var(--font-base-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
   DISPLAY STYLES - Hero Sections
   ============================================ */

.display-large,
.text-display-large {
  font-family: var(--font-display);
  font-size: var(--font-size-display-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 0.25em;
}

.display,
.text-display {
  font-family: var(--font-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 0.3em;
}

.display-small,
.text-display-small {
  font-family: var(--font-display);
  font-size: var(--font-size-display-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 0.35em;
}

/* ============================================
   HEADLINE STYLES - Section Titles
   ============================================ */

h1,
.headline-1,
.text-headline-1 {
  font-family: var(--font-display);
  font-size: var(--font-size-headline-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 0.5em;
}

h2,
.headline-2,
.text-headline-2 {
  font-family: var(--font-display);
  font-size: var(--font-size-headline-2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 0.5em;
}

h3,
.headline-3,
.text-headline-3 {
  font-family: var(--font-display);
  font-size: var(--font-size-headline-3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: 0.5em;
}

/* ============================================
   TITLE STYLES - Card Titles & Subsections
   ============================================ */

h4,
.title-1,
.text-title-1 {
  font-family: var(--font-text);
  font-size: var(--font-size-title-1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: 0.5em;
}

h5,
.title-2,
.text-title-2 {
  font-family: var(--font-text);
  font-size: var(--font-size-title-2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: 0.5em;
}

h6,
.title-3,
.text-title-3 {
  font-family: var(--font-text);
  font-size: var(--font-size-title-3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: 0.5em;
}

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

.body-large,
.text-body-large,
.lead {
  font-family: var(--font-text);
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing-normal);
}

p,
.body,
.text-body {
  font-family: var(--font-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing-normal);
}

.body-small,
.text-body-small,
small {
  font-family: var(--font-text);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--paragraph-spacing-tight);
}

/* ============================================
   SUPPORTING TEXT STYLES
   ============================================ */

.caption-1,
.text-caption-1 {
  font-family: var(--font-text);
  font-size: var(--font-size-caption-1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
}

.caption-2,
.text-caption-2 {
  font-family: var(--font-text);
  font-size: var(--font-size-caption-2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
}

.footnote,
.text-footnote {
  font-family: var(--font-text);
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wider);
}

/* ============================================
   LABEL STYLES - For UI Elements
   ============================================ */

.label,
.text-label {
  font-family: var(--font-text);
  font-size: var(--font-size-caption-2);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

.label-large {
  font-size: var(--font-size-caption-1);
}

/* ============================================
   FONT WEIGHT UTILITIES
   ============================================ */

.font-thin {
  font-weight: var(--font-weight-thin);
}

.font-ultralight {
  font-weight: var(--font-weight-ultralight);
}

.font-light {
  font-weight: var(--font-weight-light);
}

.font-regular {
  font-weight: var(--font-weight-regular);
}

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

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

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

.font-heavy {
  font-weight: var(--font-weight-heavy);
}

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

/* ============================================
   MONOSPACE TEXT
   ============================================ */

code,
kbd,
pre,
samp,
.monospace {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ============================================
   TEXT EMPHASIS STYLES
   ============================================ */

strong,
.strong,
.font-strong {
  font-weight: var(--font-weight-semibold);
}

em,
.emphasis {
  font-style: italic;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.text-capitalize {
  text-transform: capitalize;
}

/* ============================================
   LINK STYLES - Apple Inspired
   ============================================ */

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.7;
}

.link-primary {
  color: var(--primary-color, #007aff);
  font-weight: var(--font-weight-medium);
}

.link-primary:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ============================================
   SPECIAL TEXT TREATMENTS
   ============================================ */

.text-gradient {
  background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.text-shadow-lg {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */

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

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

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

.text-justify {
  text-align: justify;
}

/* ============================================
   TEXT TRUNCATION
   ============================================ */

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

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

  /* Tighter line heights on mobile for better space usage */
  .display-large,
  .display,
  .display-small {
    line-height: var(--line-height-tight);
  }
}

@media (max-width: 480px) {
  :root {
    --font-base-size: 14px;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  body {
    font-weight: var(--font-weight-medium);
  }

  strong,
  .strong {
    font-weight: var(--font-weight-bold);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  h1 {
    font-size: 24pt;
  }

  h2 {
    font-size: 20pt;
  }

  h3 {
    font-size: 16pt;
  }

  h4,
  h5,
  h6 {
    font-size: 14pt;
  }

  .display-large,
  .display,
  .display-small {
    page-break-after: avoid;
  }
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Slightly lighter font weight for dark backgrounds */
  strong,
  .strong,
  .font-strong {
    font-weight: var(--font-weight-semibold);
  }
}