/**
 * TikTok Sans Typography System
 * 
 * Applied to all titles, headers, and logo text throughout the application
 * Font: TikTok Sans from Google Fonts
 * 
 * Usage:
 * - All h1, h2, h3, h4, h5, h6 elements automatically use TikTok Sans
 * - Use .font-display class to apply TikTok Sans to any element
 * - Use .title, .heading, or .logo-text classes for semantic styling
 */

/* ============================================================================
 * BASE FONT DEFINITION
 * ============================================================================ */

/* Font family with optical sizing enabled */
.font-display,
.stack-sans-notch {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* ============================================================================
 * WEIGHT VARIANTS
 * ============================================================================ */

.stack-sans-notch-regular {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.stack-sans-notch-medium {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.stack-sans-notch-semibold {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.stack-sans-notch-bold {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.stack-sans-notch-extrabold {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

/* ============================================================================
 * SEMANTIC HEADING CLASSES
 * ============================================================================ */

/* Hero - Maximum impact for landing pages */
.heading-hero {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-size: 3.75rem; /* 60px */
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Display - Large page titles */
.heading-display {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 3rem; /* 48px */
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Title - Page headings */
.heading-title {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 2.25rem; /* 36px */
  line-height: 1.25;
  letter-spacing: -0.025em;
}

/* Section - Major sections */
.heading-section {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1.875rem; /* 30px */
  line-height: 1.375;
}

/* Subsection - Subsection headings */
.heading-subsection {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1.5rem; /* 24px */
  line-height: 1.375;
}

/* Card - Card titles */
.heading-card {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
}

/* Small - Small headings */
.heading-small {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
}

/* ============================================================================
 * RESPONSIVE SCALING
 * ============================================================================ */

@media (max-width: 768px) {
  .heading-hero {
    font-size: 2.5rem; /* 40px on mobile */
  }

  .heading-display {
    font-size: 2.25rem; /* 36px on mobile */
  }

  .heading-title {
    font-size: 1.875rem; /* 30px on mobile */
  }

  .heading-section {
    font-size: 1.5rem; /* 24px on mobile */
  }

  .heading-subsection {
    font-size: 1.25rem; /* 20px on mobile */
  }
}

/* ============================================================================
 * LOGO AND BRANDING
 * ============================================================================ */

/* Logo text styling */
.logo-text,
.brand-text,
.wordmark {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.02em;
}

.logo-text-large {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-size: 2rem;
  letter-spacing: -0.025em;
}

.logo-text-medium {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.logo-text-small {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

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

/* Apply TikTok Sans with specific weights */
.font-display-regular {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.font-display-medium {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.font-display-semibold {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.font-display-bold {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.font-display-extrabold {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

/* ============================================================================
 * SPECIAL USE CASES
 * ============================================================================ */

/* Numbers and metrics with TikTok Sans */
.metric-display {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* Button text with TikTok Sans */
.button-display {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
}

/* Badge text with TikTok Sans */
.badge-display {
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}