/* FitPicker Typography System
   Based on design/fitpicker-typography-guide.md
   This is the single source of truth for all typography in the web app */

/* Font Loading - Inter with optimized weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* CSS Variables for Typography */
:root {
  /* Font Stack */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  
  /* Font Weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Desktop Type Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  
  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.7;
  
  /* Letter Spacing */
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
}

/* Mobile Type Scale (15-20% reduction) */
@media (max-width: 768px) {
  :root {
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 28px;
    --text-5xl: 36px;
    --text-6xl: 42px;
  }
}

/* Base Typography */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Component Typography Classes */

/* Hero & Headlines */
.text-hero {
  font-size: var(--text-5xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.text-hero-sub {
  font-size: var(--text-xl);
  font-weight: var(--font-regular);
  letter-spacing: -0.01em;
  line-height: var(--leading-relaxed);
  color: #666;
}

/* Page & Section Headers */
.text-page-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
}

.text-section-header {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}

.text-subsection {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}

/* Body Text */
.text-body {
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}

.text-body-lg {
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}

.text-body-sm {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
}

/* Navigation */
.text-nav {
  font-size: 15px;
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
}

.text-nav-logo {
  font-size: 20px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-snug);
}

.text-mobile-menu {
  font-size: 18px;
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
}

/* Buttons & CTAs */
.text-button {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-tight);
}

.text-button-sm {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
}

.text-button-lg {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
}

/* Cards & Components */
.text-card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
}

.text-card-description {
  font-size: 15px;
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: #555;
}

.text-card-meta {
  font-size: 13px;
  font-weight: var(--font-regular);
  color: #888;
}

/* Forms & Inputs */
.text-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  color: #1a1a1a;
}

.text-input {
  font-size: var(--text-base); /* 16px prevents iOS zoom */
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
}

.text-hint {
  font-size: 13px;
  font-weight: var(--font-regular);
  color: #666;
}

.text-error {
  font-size: 13px;
  font-weight: var(--font-medium);
  color: #ef4444;
}

/* Analysis Results */
.text-season-reveal {
  font-size: 42px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-align: center;
}

@media (max-width: 768px) {
  .text-season-reveal {
    font-size: 32px;
  }
}

.text-season-description {
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  text-align: center;
}

.text-color-name {
  font-size: 13px;
  font-weight: var(--font-medium);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Dashboard */
.text-dashboard-greeting {
  font-size: 32px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
}

@media (max-width: 768px) {
  .text-dashboard-greeting {
    font-size: 26px;
  }
}

/* Badges & Labels */
.text-badge {
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.text-caption {
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-normal);
  color: #666;
}

/* Modals */
.text-modal-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
}

.text-modal-body {
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
}

/* Footer */
.text-footer-heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.text-footer-link {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: #666;
}

.text-footer-copyright {
  font-size: 13px;
  font-weight: var(--font-regular);
  color: #888;
}

/* Special States */
.text-empty-state {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: #666;
  text-align: center;
}

.text-loading {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: 0.03em;
  animation: pulse 2s infinite;
}

/* Utility Classes */
.font-regular { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

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

.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* Animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}