/*
 * ============================================================
 *  APPLE TYPOGRAPHY SYSTEM — CSS
 * ============================================================
 *  Full type system based on Apple HIG:
 *    - System font stacks (legal for web)
 *    - iOS & macOS type scales
 *    - Responsive typography (Apple.com style)
 *    - Dynamic Type support via CSS clamp()
 *
 *  Sources:
 *    - https://developer.apple.com/design/human-interface-guidelines/typography
 *    - https://developer.apple.com/fonts/
 *    - https://css-tricks.com/snippets/css/system-font-stack/
 *    - Apple.com responsive CSS observations
 * ============================================================
 */


/* ============================================================
   1. FONT FACE — Apple's Web Font Loading (apple.com style)
   ============================================================
   Note: SF Pro is NOT licensed for web @font-face embedding.
   Apple uses system font stacks which map to SF Pro on Apple devices.
   Below is the system-ui approach (recommended & legal).
   ============================================================ */

/* Base font setup */
.apple-ds {
  font-family: var(--font-system, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif);
  font-size: var(--text-body, 17px);
  line-height: var(--lh-body, 22px);
  font-weight: var(--fw-regular, 400);
  color: var(--apple-label, #000000);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1;
}

/* Code / Monospace */
.apple-ds code, .apple-ds pre, .apple-ds kbd, .apple-ds samp, .apple-ds .mono {
  font-family: var(--font-mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace);
}


/* ============================================================
   2. iOS TYPE SCALE (Default "Large" Dynamic Type size)
   ============================================================
   Use this for web — sizes are comfortable on both desktop and mobile.
   ============================================================ */

.apple-ds h1, .apple-ds .h1 {
  font-size: var(--text-large-title, 34px);
  line-height: var(--lh-large-title, 41px);
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-tight, -0.003em);
  margin: 0 0 var(--space-4, 16px);
}

.apple-ds h2, .apple-ds .h2 {
  font-size: var(--text-title1, 28px);
  line-height: var(--lh-title1, 34px);
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-tight, -0.003em);
  margin: 0 0 var(--space-3, 12px);
}

.apple-ds h3, .apple-ds .h3 {
  font-size: var(--text-title2, 22px);
  line-height: var(--lh-title2, 28px);
  font-weight: var(--fw-bold, 700);
  margin: 0 0 var(--space-3, 12px);
}

.apple-ds h4, .apple-ds .h4 {
  font-size: var(--text-title3, 20px);
  line-height: var(--lh-title3, 25px);
  font-weight: var(--fw-semibold, 600);
  margin: 0 0 var(--space-2, 8px);
}

.apple-ds h5, .apple-ds .h5 {
  font-size: var(--text-headline, 17px);
  line-height: var(--lh-headline, 22px);
  font-weight: var(--fw-semibold, 600);
  margin: 0 0 var(--space-2, 8px);
}

.apple-ds h6, .apple-ds .h6 {
  font-size: var(--text-subheadline, 15px);
  line-height: var(--lh-subheadline, 20px);
  font-weight: var(--fw-semibold, 600);
  margin: 0 0 var(--space-2, 8px);
}

.apple-ds p, .apple-ds .body {
  font-size: var(--text-body, 17px);
  line-height: var(--lh-body, 22px);
  font-weight: var(--fw-regular, 400);
  margin: 0 0 var(--space-4, 16px);
}

.apple-ds small, .apple-ds .small {
  font-size: var(--text-footnote, 13px);
  line-height: var(--lh-footnote, 18px);
}


/* ============================================================
   3. RESPONSIVE TYPOGRAPHY (Apple.com breakpoints)
   ============================================================
   Desktop → Tablet (≤1068px) → Mobile (≤735px)
   ============================================================ */

/* Desktop (default) */
.hero-title {
  font-size: 56px;
  line-height: 1.07;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: -0.005em;
}

.hero-subtitle {
  font-size: 28px;
  line-height: 1.14;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.007em;
}

.section-title {
  font-size: 48px;
  line-height: 1.08;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: -0.003em;
}

.section-subtitle {
  font-size: 21px;
  line-height: 1.38;
  font-weight: var(--fw-regular, 400);
  letter-spacing: 0.011em;
}

/* Tablet */
@media (max-width: 1068px) {
  .hero-title {
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -0.003em;
  }

  .hero-subtitle {
    font-size: 24px;
    line-height: 1.17;
    letter-spacing: 0.009em;
  }

  .section-title {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .section-subtitle {
    font-size: 19px;
    line-height: 1.42;
    letter-spacing: 0.012em;
  }
}

/* Mobile */
@media (max-width: 735px) {
  .hero-title {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .hero-subtitle {
    font-size: 21px;
    line-height: 1.24;
    letter-spacing: 0.011em;
  }

  .section-title {
    font-size: 32px;
    line-height: 1.125;
    letter-spacing: 0.004em;
  }

  .section-subtitle {
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.022em;
  }

  /* Scale down heading hierarchy on mobile */
  .apple-ds h1, .apple-ds .h1 {
    font-size: 28px;
    line-height: 34px;
  }

  .apple-ds h2, .apple-ds .h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .apple-ds h3, .apple-ds .h3 {
    font-size: 20px;
    line-height: 25px;
  }

  .apple-ds h4, .apple-ds .h4 {
    font-size: 17px;
    line-height: 22px;
  }
}


/* ============================================================
   4. DYNAMIC TYPE SUPPORT (fluid sizing with clamp)
   ============================================================
   Respects user font-size preferences.
   Maps to iOS Dynamic Type behavior on web.
   ============================================================ */

.type-fluid-large-title {
  font-size: clamp(28px, 2.5vw + 1rem, 40px);
  line-height: 1.2;
  font-weight: var(--fw-bold);
}

.type-fluid-title1 {
  font-size: clamp(24px, 2vw + 0.75rem, 32px);
  line-height: 1.21;
  font-weight: var(--fw-bold);
}

.type-fluid-title2 {
  font-size: clamp(20px, 1.5vw + 0.5rem, 26px);
  line-height: 1.27;
  font-weight: var(--fw-bold);
}

.type-fluid-title3 {
  font-size: clamp(17px, 1.25vw + 0.5rem, 22px);
  line-height: 1.25;
  font-weight: var(--fw-semibold);
}

.type-fluid-body {
  font-size: clamp(15px, 1vw + 0.5rem, 19px);
  line-height: 1.47;
  font-weight: var(--fw-regular);
}


/* ============================================================
   5. TEXT UTILITY CLASSES
   ============================================================ */

/* Font weights */
.fw-ultralight { font-weight: var(--fw-ultralight); }
.fw-thin       { font-weight: var(--fw-thin); }
.fw-light      { font-weight: var(--fw-light); }
.fw-regular    { font-weight: var(--fw-regular); }
.fw-medium     { font-weight: var(--fw-medium); }
.fw-semibold   { font-weight: var(--fw-semibold); }
.fw-bold       { font-weight: var(--fw-bold); }
.fw-heavy      { font-weight: var(--fw-heavy); }
.fw-black      { font-weight: var(--fw-black); }

/* Font families */
.font-system   { font-family: var(--font-system); }
.font-rounded  { font-family: var(--font-rounded); }
.font-serif    { font-family: var(--font-serif); }
.font-mono     { font-family: var(--font-mono); }

/* Text alignment */
.apple-ds .text-left     { text-align: left; }
.apple-ds .text-center   { text-align: center; }
.apple-ds .text-right    { text-align: right; }
.apple-ds .text-justify  { text-align: justify; }

/* Text transform */
.apple-ds .text-uppercase   { text-transform: uppercase; }
.apple-ds .text-lowercase   { text-transform: lowercase; }
.apple-ds .text-capitalize  { text-transform: capitalize; }
.apple-ds .text-normal-case { text-transform: none; }

/* Text decoration */
.text-underline   { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-no-decoration { text-decoration: none; }

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

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

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

/* Leading (line height) adjustments - per Apple HIG */
.leading-tight   { line-height: 1.15; }  /* constrained areas */
.leading-default { line-height: 1.29; }  /* default */
.leading-loose   { line-height: 1.53; }  /* wide columns */

/* Letter spacing */
.tracking-tight  { letter-spacing: -0.003em; }
.tracking-normal { letter-spacing: 0; }
.tracking-loose  { letter-spacing: 0.004em; }
.tracking-wide   { letter-spacing: 0.011em; }