/*
 * Global Typography System - Pixel Perfect Implementation
 * Based on Figma Design Specifications
 */

/* ===== FONT IMPORTS ===== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ===== LOCAL FONT FACES (Adobe Caslon Pro) ===== */
@font-face {
  font-family: "Adobe Caslon Pro";
  src: url("../fonts/ACaslonPro-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Caslon Pro";
  src: url("../fonts/ACaslonPro-SemiboldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Caslon Pro";
  src: url("../fonts/ACASLONPRO-BOLDITALIC.OTF") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Font Families */
  --font-display: "Adobe Caslon Pro", "Playfair Display", "Georgia",
    "Times New Roman", serif;
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-secondary: "Inter", sans-serif;

  /* Font Sizes - Desktop */
  --fs-hero-title: 56px;
  --fs-page-title: 48px;
  --fs-section-title: 36px;
  --fs-card-title: 24px;
  --fs-subtitle: 20px;
  --fs-body-large: 18px;
  --fs-body: 16px;
  --fs-body-small: 14px;
  --fs-caption: 12px;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Line Heights */
  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --lh-loose: 1.8;

  /* Letter Spacing */
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.05em;

  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 96px;
  --space-6xl: 128px;
}

/* ===== TYPOGRAPHY CLASSES ===== */

/* Hero Titles */
.text-hero {
  font-family: var(--font-primary);
  font-size: var(--fs-hero-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* Page Titles */
.text-page-title {
  font-family: var(--font-primary);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

/* Section Titles */
.text-section-title {
  font-family: var(--font-primary);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

/* Card Titles */
.text-card-title {
  font-family: var(--font-primary);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

/* Subtitles */
.text-subtitle {
  font-family: var(--font-primary);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

/* Body Text */
.text-body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

.text-body-large {
  font-family: var(--font-primary);
  font-size: var(--fs-body-large);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

.text-body-small {
  font-family: var(--font-primary);
  font-size: var(--fs-body-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

/* Caption Text */
.text-caption {
  font-family: var(--font-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  :root {
    --fs-hero-title: 48px;
    --fs-page-title: 40px;
    --fs-section-title: 32px;
    --fs-card-title: 22px;
    --fs-subtitle: 18px;
    --fs-body-large: 17px;
    --fs-body: 15px;
    --fs-body-small: 13px;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  :root {
    --fs-hero-title: 40px;
    --fs-page-title: 32px;
    --fs-section-title: 28px;
    --fs-card-title: 20px;
    --fs-subtitle: 17px;
    --fs-body-large: 16px;
    --fs-body: 14px;
    --fs-body-small: 12px;
    --fs-caption: 11px;

    /* Adjust spacing for mobile */
    --space-lg: 20px;
    --space-xl: 28px;
    --space-2xl: 40px;
    --space-3xl: 52px;
    --space-4xl: 64px;
    --space-5xl: 80px;
    --space-6xl: 96px;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  :root {
    --fs-hero-title: 36px;
    --fs-page-title: 28px;
    --fs-section-title: 24px;
    --fs-card-title: 18px;
    --fs-subtitle: 16px;
  }
}

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

/* Font Weight Utilities */
.font-regular {
  font-weight: var(--fw-regular);
}
.font-medium {
  font-weight: var(--fw-medium);
}
.font-semibold {
  font-weight: var(--fw-semibold);
}
.font-bold {
  font-weight: var(--fw-bold);
}
.font-extrabold {
  font-weight: var(--fw-extrabold);
}

/* Text Alignment */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}

/* Line Height Utilities */
.leading-tight {
  line-height: var(--lh-tight);
}
.leading-snug {
  line-height: var(--lh-snug);
}
.leading-normal {
  line-height: var(--lh-normal);
}
.leading-relaxed {
  line-height: var(--lh-relaxed);
}
.leading-loose {
  line-height: var(--lh-loose);
}

/* Letter Spacing Utilities */
.tracking-tight {
  letter-spacing: var(--ls-tight);
}
.tracking-snug {
  letter-spacing: var(--ls-snug);
}
.tracking-normal {
  letter-spacing: var(--ls-normal);
}
.tracking-wide {
  letter-spacing: var(--ls-wide);
}
.tracking-wider {
  letter-spacing: var(--ls-wider);
}

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

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

/* Spacing Utilities */
.mt-xs {
  margin-top: var(--space-xs);
}
.mt-sm {
  margin-top: var(--space-sm);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.mt-xl {
  margin-top: var(--space-xl);
}
.mt-2xl {
  margin-top: var(--space-2xl);
}
.mt-3xl {
  margin-top: var(--space-3xl);
}

.mb-xs {
  margin-bottom: var(--space-xs);
}
.mb-sm {
  margin-bottom: var(--space-sm);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}
.mb-2xl {
  margin-bottom: var(--space-2xl);
}
.mb-3xl {
  margin-bottom: var(--space-3xl);
}

.pt-xs {
  padding-top: var(--space-xs);
}
.pt-sm {
  padding-top: var(--space-sm);
}
.pt-md {
  padding-top: var(--space-md);
}
.pt-lg {
  padding-top: var(--space-lg);
}
.pt-xl {
  padding-top: var(--space-xl);
}
.pt-2xl {
  padding-top: var(--space-2xl);
}
.pt-3xl {
  padding-top: var(--space-3xl);
}

.pb-xs {
  padding-bottom: var(--space-xs);
}
.pb-sm {
  padding-bottom: var(--space-sm);
}
.pb-md {
  padding-bottom: var(--space-md);
}
.pb-lg {
  padding-bottom: var(--space-lg);
}
.pb-xl {
  padding-bottom: var(--space-xl);
}
.pb-2xl {
  padding-bottom: var(--space-2xl);
}
.pb-3xl {
  padding-bottom: var(--space-3xl);
}

/* Padding Y-axis */
.py-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.py-sm {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.py-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.py-lg {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.py-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.py-2xl {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.py-3xl {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}
.py-4xl {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}
.py-5xl {
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-5xl);
}

/* Padding X-axis */
.px-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}
.px-sm {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}
.px-md {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.px-lg {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.px-xl {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.px-2xl {
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
}
.px-3xl {
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
}