/**
 * BirdMapper Pro Typography System
 * Version 1.0.0
 * 
 * A complete typography system for nature-tech applications.
 * Designed for scientific credibility, data legibility, and accessibility.
 */

/* ==========================================================================
   Font Imports
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Font Families */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', "SF Mono", "Monaco", "Consolas", monospace;

  /* Font Weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.75;

  /* Desktop Type Scale (default) */
  --text-4xl: 3rem;        /* 48px */
  --text-3xl: 2.25rem;     /* 36px */
  --text-2xl: 1.75rem;     /* 28px */
  --text-xl: 1.375rem;     /* 22px */
  --text-lg: 1.125rem;     /* 18px */
  --text-base: 1rem;       /* 16px */
  --text-sm: 0.875rem;     /* 14px */
  --text-xs: 0.75rem;      /* 12px */
  --text-2xs: 0.625rem;    /* 10px */

  /* BirdMapper Brand Colors (text) - v2.0 Palette */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;
  --color-text-disabled: #475569;
  --color-text-accent: #4ecca3;
  --color-text-warning: #f59e0b;
  --color-text-error: #ef4444;
  --color-text-success: #4ecca3;
}

/* Tablet Breakpoint (768px - 1023px) */
@media (max-width: 1023px) {
  :root {
    --text-4xl: 2.5rem;      /* 40px */
    --text-3xl: 2rem;        /* 32px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-xl: 1.25rem;      /* 20px */
    --text-lg: 1.0625rem;    /* 17px */
  }
}

/* Mobile Breakpoint (< 768px) */
@media (max-width: 767px) {
  :root {
    --text-4xl: 2rem;        /* 32px */
    --text-3xl: 1.625rem;    /* 26px */
    --text-2xl: 1.375rem;    /* 22px */
    --text-xl: 1.125rem;     /* 18px */
    --text-lg: 1rem;         /* 16px */
    --text-base: 0.9375rem;  /* 15px */
    --text-sm: 0.8125rem;    /* 13px */
    --text-xs: 0.6875rem;    /* 11px */
  }
}

/* ==========================================================================
   Base Typography Reset
   ========================================================================== */

*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Heading Styles
   ========================================================================== */

.heading-hero {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.heading-page {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.heading-section {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

.heading-card {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.heading-subsection {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Body Text Styles
   ========================================================================== */

.body-large {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.body-default {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.body-secondary {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.body-small {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ==========================================================================
   UI Element Styles
   ========================================================================== */

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.label-sm {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-subtle);
  text-transform: uppercase;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-subtle);
}

/* Buttons */
.button-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
}

.button-text-lg {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-normal);
}

.button-text-sm {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   Data Display Styles
   ========================================================================== */

.data-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  color: var(--color-text-accent);
  font-variant-numeric: tabular-nums;
}

.data-value-lg {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  color: var(--color-text-accent);
  font-variant-numeric: tabular-nums;
}

.data-value-xl {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
  color: var(--color-text-accent);
  font-variant-numeric: tabular-nums;
}

.data-value-sm {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  color: var(--color-text-accent);
  font-variant-numeric: tabular-nums;
}

.data-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-subtle);
  text-transform: uppercase;
}

.timestamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.coordinates {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Chart & Visualization Styles
   ========================================================================== */

.chart-axis-label {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-subtle);
  text-transform: uppercase;
}

.chart-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--font-regular);
  color: var(--color-text-disabled);
  font-variant-numeric: tabular-nums;
}

.chart-tooltip-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.chart-tooltip-body {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.chart-legend {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Navigation Styles
   ========================================================================== */

.nav-item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.nav-item:hover {
  color: var(--color-text-secondary);
}

.nav-item-active {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  color: var(--color-text-accent);
}

.nav-item-mobile {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Badge & Tag Styles
   ========================================================================== */

.badge {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.badge-lg {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
}

/* ==========================================================================
   Species-Specific Styles
   ========================================================================== */

.species-common {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.species-common-lg {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.species-scientific {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.species-scientific-lg {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.species-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-subtle);
  text-transform: uppercase;
}

/* ==========================================================================
   Alert & Notification Styles
   ========================================================================== */

.alert-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

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

.toast-message {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

.input-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

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

.input-placeholder {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  color: var(--color-text-disabled);
}

.input-helper {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-subtle);
}

.input-error {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-error);
}

/* ==========================================================================
   Link Styles
   ========================================================================== */

.link {
  font-weight: var(--font-medium);
  color: var(--color-text-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.link:hover {
  color: #3db892; /* Dark Green from color scheme */
  text-decoration: underline;
}

.link-subtle {
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-subtle:hover {
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Font Family */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

/* Font Weight */
.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); }

/* Font Size */
.text-2xs { font-size: var(--text-2xs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

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

/* Line Height */
.leading-none { line-height: var(--leading-none); }
.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); }

/* Text Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-disabled { color: var(--color-text-disabled); }
.text-accent { color: var(--color-text-accent); }
.text-warning { color: var(--color-text-warning); }
.text-error { color: var(--color-text-error); }
.text-success { color: var(--color-text-success); }

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

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

/* Font Style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Numeric */
.tabular-nums { font-variant-numeric: tabular-nums; }
.proportional-nums { font-variant-numeric: proportional-nums; }

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

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

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

/* Readable Line Length */
.prose {
  max-width: 65ch;
}

.prose-wide {
  max-width: 75ch;
}

.prose-narrow {
  max-width: 45ch;
}