/* Typography System
 * 
 * This file defines the centralized typography system for the application.
 * All font sizes, weights, and line heights should use these variables.
 * 
 * Type Scale (based on 1rem = 16px):
 * - xs:   0.75rem  (12px)  - Small labels, captions
 * - sm:   0.875rem (14px)  - Secondary text, small buttons
 * - base: 1rem     (16px)  - Body text, default
 * - md:   1.125rem (18px)  - Slightly emphasized text
 * - lg:   1.25rem  (20px)  - Subheadings
 * - xl:   1.5rem   (24px)  - Section headings
 * - 2xl:  2rem     (32px)  - Page titles
 * - 3xl:  2.5rem   (40px)  - Hero text
 * - 4xl:  3rem     (48px)  - Display text
 */

:root {
    /* Font Family */
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-md: 1.125rem;      /* 18px */
    --font-size-lg: 1.25rem;       /* 20px */
    --font-size-xl: 1.5rem;         /* 24px */
    --font-size-2xl: 2rem;         /* 32px */
    --font-size-3xl: 2.5rem;       /* 40px */
    --font-size-4xl: 3rem;         /* 48px */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
}

/* Base Typography */
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: #333;
}

/* Headings */
h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 0;
}

h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 0;
}

h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0;
}

h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    margin: 0;
}

/* Typography Utility Classes */
.text-xs {
    font-size: var(--font-size-xs);
}

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

.text-base {
    font-size: var(--font-size-base);
}

.text-md {
    font-size: var(--font-size-md);
}

.text-lg {
    font-size: var(--font-size-lg);
}

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

.text-2xl {
    font-size: var(--font-size-2xl);
}

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

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

/* Font Weight Utilities */
.font-normal {
    font-weight: var(--font-weight-normal);
}

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

.leading-normal {
    line-height: var(--line-height-normal);
}

.leading-relaxed {
    line-height: var(--line-height-relaxed);
}

.leading-loose {
    line-height: var(--line-height-loose);
}

/* Helper text and small text utilities */
.text-help {
    font-size: var(--font-size-sm);
    color: #666;
}

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

.text-tiny {
    font-size: var(--font-size-xs);
}

.text-muted {
    color: #6c757d;
}

.text-secondary {
    color: #666;
}

.text-danger {
    color: #c0392b;
}

.text-success {
    color: #27ae60;
}