/**
 * Typography System - Wheelie Frontend
 *
 * Aligned with iOS Theme.FontSize from:
 * wheelie-app/Wheelie/Wheelie/Utils/Constants/Theme.swift
 *
 * Provides consistent typography scale throughout the application using CSS custom
 * properties and utility classes.
 */

:root {
  /* ========================================
     FONT SIZE SCALE (matches iOS Theme.FontSize)
     iOS uses points (pt), web uses pixels (px)
     1pt ≈ 1.333px at standard DPI, but we use 1:1 for consistency
     ======================================== */
  --font-size-large-title: 28px;     /* Theme.FontSize.largeTitle */
  --font-size-card-value: 24px;      /* Theme.FontSize.cardValue */
  --font-size-heading-lg: 22px;      /* Section titles */
  --font-size-heading-md: 20px;      /* Subsection titles */
  --font-size-heading-sm: 18px;      /* Modal titles, chart headers */
  --font-size-body: 15px;            /* Theme.FontSize.body */
  --font-size-section-header: 14px;  /* Theme.FontSize.sectionHeader */
  --font-size-caption: 12px;         /* Theme.FontSize.caption */

  /* ========================================
     FONT WEIGHTS
     ======================================== */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========================================
     LINE HEIGHTS
     ======================================== */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========================================
     LETTER SPACING
     ======================================== */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* ========================================
     FONT FAMILIES
     System font stack for consistency with iOS
     ======================================== */
  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

/* ========================================
   BASE TYPOGRAPHY STYLES
   ======================================== */

body {
  font-family: var(--font-family-system);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Font Size Classes */
.text-large-title {
  font-size: var(--font-size-large-title);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

.text-section-header {
  font-size: var(--font-size-section-header);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.text-card-value {
  font-size: var(--font-size-card-value);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
}

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

.text-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
}

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

/* Line Height Classes */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* Text Color Classes */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-profit { color: var(--color-profit); }
.text-loss { color: var(--color-loss); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-assignment { color: var(--color-assignment); }

/* Monospace font */
.font-mono {
  font-family: var(--font-family-mono);
}

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

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* ========================================
   HEADING ELEMENT STYLES
   Semantic HTML headings with design system
   ======================================== */

h1, .h1 {
  font-size: var(--font-size-large-title);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

h2, .h2 {
  font-size: var(--font-size-card-value);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

h3, .h3 {
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

h4, .h4 {
  font-size: var(--font-size-section-header);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-xs) 0;
}

/* ========================================
   PARAGRAPH STYLES
   ======================================== */

p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

p.caption {
  font-size: var(--font-size-caption);
  color: var(--text-secondary);
}

/* ========================================
   LINK STYLES
   ======================================== */

a {
  color: var(--color-primary-green);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

a:active {
  opacity: 0.6;
}

/* ========================================
   CODE STYLES
   ======================================== */

code, pre {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
}

code {
  background-color: var(--background-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

pre {
  background-color: var(--background-secondary);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--line-height-relaxed);
}

pre code {
  background-color: transparent;
  padding: 0;
}

/* ========================================
   LIST STYLES
   ======================================== */

ul, ol {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  padding-left: var(--spacing-lg);
  margin: 0 0 var(--spacing-md) 0;
}

li {
  margin-bottom: var(--spacing-xs);
}

/* ========================================
   USAGE EXAMPLES
   ======================================== */

/*
  CSS Variables:
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);

  Utility Classes:
  <h1>Page Title</h1>
  <h2>Section Title</h2>
  <h4>Subsection Header</h4>
  <p class="text-caption">Small descriptive text</p>
  <div class="text-large-title">Custom large text</div>
  <div class="text-card-value text-profit">$12,345.67</div>
  <span class="text-section-header">OPEN POSITIONS</span>
  <code>inline code</code>
  <pre><code>code block</code></pre>
*/