/*============================================
  ALVEA OS - TYPOGRAPHY SYSTEM v2.0.0
  Single Source of Truth

  Font Stack (Fontshare - Premium Free):
  - Clash Display: Headlines, hero text, display
  - General Sans: Body, UI, buttons, navigation
  - Azeret Mono: Code, metrics, data

  Scale: Perfect Fourth (1.333)
  Accessibility: WCAG AA compliant
============================================*/

/* ===========================================
   1. FONT FAMILIES
=========================================== */
:root {
  /* Primitive Font Stacks - System 2: Surgical Precision */
  --font-family-display: 'Clash Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'Azeret Mono', 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* Semantic Aliases */
  --font-heading: var(--font-family-display);
  --font-text: var(--font-family-body);
  --font-code: var(--font-family-mono);
  --font-ui: var(--font-family-body);

  /* Legacy compatibility */
  --font-display: var(--font-family-display);
  --font-body: var(--font-family-body);
  --font-mono: var(--font-family-mono);
}

/* ===========================================
   2. TYPE SCALE (Fluid with clamp)
=========================================== */
:root {
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: clamp(1.5rem, 2.5vw, 1.875rem);    /* 24-30px */
  --text-4xl: clamp(1.75rem, 3vw, 2.25rem);      /* 28-36px */
  --text-5xl: clamp(2rem, 4vw, 3rem);            /* 32-48px */
  --text-6xl: clamp(2.5rem, 5vw, 3.75rem);       /* 40-60px */
  --text-hero: clamp(2.5rem, 6vw, 5.5rem);       /* 40-88px */
}

/* ===========================================
   3. FONT WEIGHTS
=========================================== */
:root {
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

/* ===========================================
   4. LINE HEIGHTS
=========================================== */
:root {
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;
}

/* ===========================================
   5. LETTER SPACING
=========================================== */
:root {
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* ===========================================
   6. TEXT COLORS (Light Mode)
=========================================== */
:root {
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #717171;
  --text-disabled: #9ca3af;
  --text-accent: #2563eb;
  --text-inverse: #ffffff;
}

/* ===========================================
   7. TEXT COLORS (Dark Mode)
=========================================== */
[data-theme="dark"],
.dark {
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  --text-muted: #6a6a6a;
  --text-disabled: #4b5563;
  --text-accent: #60a5fa;
  --text-inverse: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-primary: #f5f5f5;
    --text-secondary: #a0a0a0;
    --text-muted: #6a6a6a;
    --text-disabled: #4b5563;
    --text-accent: #60a5fa;
    --text-inverse: #1a1a1a;
  }
}

/* ===========================================
   8. BASE STYLES
=========================================== */
html {
  font-size: 100%; /* 16px base, respects user preferences */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* ===========================================
   9. HEADINGS
=========================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-top: 0;
}

h1, .h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tighter);
}

h2, .h2 {
  font-size: var(--text-4xl);
}

h3, .h3 {
  font-size: var(--text-3xl);
}

h4, .h4 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
}

h5, .h5 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
}

h6, .h6 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
}

/* ===========================================
   10. PARAGRAPHS & BODY TEXT
=========================================== */
p {
  margin-top: 0;
  margin-bottom: 1em;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

small, .small {
  font-size: var(--text-sm);
}

.text-muted {
  color: var(--text-muted);
}

/* ===========================================
   11. LINKS
=========================================== */
a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
}

/* ===========================================
   12. CODE & MONOSPACE
=========================================== */
code, kbd, pre, samp {
  font-family: var(--font-code);
}

code {
  font-size: 0.875em;
  padding: 0.125em 0.25em;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.25em;
}

[data-theme="dark"] code,
.dark code {
  background: rgba(255, 255, 255, 0.1);
}

pre {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
}

/* ===========================================
   13. LISTS
=========================================== */
ul, ol {
  margin-top: 0;
  margin-bottom: 1em;
  padding-left: 1.5em;
}

li {
  margin-bottom: 0.25em;
}

/* ===========================================
   14. UTILITY CLASSES - Font Family
=========================================== */
.font-display { font-family: var(--font-heading) !important; }
.font-body { font-family: var(--font-text) !important; }
.font-mono { font-family: var(--font-code) !important; }
.font-heading { font-family: var(--font-heading) !important; }
.font-text { font-family: var(--font-text) !important; }
.font-code { font-family: var(--font-code) !important; }

/* ===========================================
   15. UTILITY CLASSES - Font Size
=========================================== */
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }
.text-4xl { font-size: var(--text-4xl) !important; }
.text-5xl { font-size: var(--text-5xl) !important; }
.text-6xl { font-size: var(--text-6xl) !important; }
.text-hero { font-size: var(--text-hero) !important; }

/* ===========================================
   16. UTILITY CLASSES - Font Weight
=========================================== */
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* ===========================================
   17. UTILITY CLASSES - Line Height
=========================================== */
.leading-none { line-height: var(--leading-none) !important; }
.leading-tight { line-height: var(--leading-tight) !important; }
.leading-snug { line-height: var(--leading-snug) !important; }
.leading-normal { line-height: var(--leading-normal) !important; }
.leading-relaxed { line-height: var(--leading-relaxed) !important; }
.leading-loose { line-height: var(--leading-loose) !important; }

/* ===========================================
   18. UTILITY CLASSES - Letter Spacing
=========================================== */
.tracking-tighter { letter-spacing: var(--tracking-tighter) !important; }
.tracking-tight { letter-spacing: var(--tracking-tight) !important; }
.tracking-normal { letter-spacing: var(--tracking-normal) !important; }
.tracking-wide { letter-spacing: var(--tracking-wide) !important; }
.tracking-wider { letter-spacing: var(--tracking-wider) !important; }
.tracking-widest { letter-spacing: var(--tracking-widest) !important; }

/* ===========================================
   19. UTILITY CLASSES - Text Transform
=========================================== */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* ===========================================
   20. UTILITY CLASSES - Text Alignment
=========================================== */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* ===========================================
   21. UTILITY CLASSES - Text Colors
=========================================== */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--text-accent) !important; }
.text-inverse { color: var(--text-inverse) !important; }

/* ===========================================
   22. COMPONENT PATTERNS - Hero
=========================================== */
.hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-primary);
}

.hero-subtitle {
  font-family: var(--font-text);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* ===========================================
   23. COMPONENT PATTERNS - Section
=========================================== */
.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.section-subtitle {
  font-family: var(--font-text);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 65ch;
}

/* ===========================================
   24. COMPONENT PATTERNS - Cards
=========================================== */
.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.card-description {
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* ===========================================
   25. COMPONENT PATTERNS - Metrics/Data
=========================================== */
.metric-value {
  font-family: var(--font-code);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.metric-label {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}

/* ===========================================
   26. COMPONENT PATTERNS - Pricing
=========================================== */
.price {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
  color: var(--text-primary);
}

.price-currency {
  font-size: 0.5em;
  vertical-align: super;
  font-weight: var(--font-weight-bold);
}

.price-period {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  color: var(--text-muted);
}

/* ===========================================
   27. COMPONENT PATTERNS - Badges
=========================================== */
.badge-text {
  font-family: var(--font-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-none);
}

/* ===========================================
   28. COMPONENT PATTERNS - Navigation
=========================================== */
.nav-link {
  font-family: var(--font-text);
  font-size: 0.9375rem; /* 15px */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  color: var(--text-primary);
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--text-accent);
  text-decoration: none;
}

.nav-link.active {
  font-weight: var(--font-weight-semibold);
  color: var(--text-accent);
}

/* ===========================================
   29. COMPONENT PATTERNS - Buttons
=========================================== */
.btn-text {
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  line-height: var(--leading-none);
}

.btn-text-sm {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

/* ===========================================
   30. COMPONENT PATTERNS - Forms
=========================================== */
.form-label {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.form-input {
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
}

.form-helper {
  font-family: var(--font-text);
  font-size: 0.8125rem; /* 13px */
  font-weight: var(--font-weight-normal);
  color: var(--text-muted);
}

.form-error {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: #dc2626;
}

/* ===========================================
   31. PROSE - Long-form Content
=========================================== */
.prose {
  max-width: 65ch;
  font-family: var(--font-text);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-loose);
  color: var(--text-primary);
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--font-heading);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.prose h1 { font-size: var(--text-4xl); }
.prose h2 { font-size: var(--text-3xl); }
.prose h3 { font-size: var(--text-2xl); }
.prose h4 { font-size: var(--text-xl); }

.prose p {
  margin-bottom: 1.5em;
}

.prose a {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose ul, .prose ol {
  margin-bottom: 1.5em;
}

.prose li {
  margin-bottom: 0.5em;
}

.prose blockquote {
  border-left: 4px solid var(--text-accent);
  padding-left: 1em;
  margin-left: 0;
  font-style: italic;
  color: var(--text-secondary);
}

.prose code {
  font-size: 0.875em;
}

.prose pre {
  margin: 1.5em 0;
  padding: 1em;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.5em;
  overflow-x: auto;
}

[data-theme="dark"] .prose pre,
.dark .prose pre {
  background: rgba(255, 255, 255, 0.05);
}

/* ===========================================
   32. TEXT OVERFLOW UTILITIES
=========================================== */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.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;
}

.break-words {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ===========================================
   33. SELECTION STYLES
=========================================== */
::selection {
  background: var(--text-accent);
  color: white;
}

::-moz-selection {
  background: var(--text-accent);
  color: white;
}

/* ===========================================
   34. ACCESSIBILITY
=========================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================
   35. PRINT STYLES
=========================================== */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: black;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }
}