/**
 * ==========================================================================
 * TYPOGRAPHY - FONT DEFINITIONS AND TEXT STYLES
 * ==========================================================================
 *
 * Defines the typographic scale, font families, and text utility classes.
 * Uses system font stack for optimal performance and native feel.
 *
 * FONT SCALE:
 * - text-xs:  0.75rem  (12px) - Labels, captions, badges
 * - text-sm:  0.875rem (14px) - Secondary text, form labels
 * - text-base: 1rem    (16px) - Body text (default)
 * - text-lg:  1.125rem (18px) - Emphasized body text
 * - text-xl:  1.25rem  (20px) - H4, card titles
 * - text-2xl: 1.5rem   (24px) - H3, section headings
 * - text-3xl: 1.875rem (30px) - H2, page titles
 * - text-4xl: 2.25rem  (36px) - H1, hero headings
 *
 * UTILITY CLASSES:
 * - .text-muted    - Secondary text color
 * - .text-tertiary - Tertiary/disabled text color
 * - .text-accent   - Accent/brand color text
 * - .font-medium   - 500 weight
 * - .font-semibold - 600 weight
 * - .font-bold     - 700 weight
 *
 * PHP INTEGRATION:
 * - No PHP conversion needed; this is static CSS
 *
 * ==========================================================================
 */

:root {
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

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

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

h1, .h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}

h2, .h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
}

h3, .h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}

h4, .h4 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-snug);
}

p {
    margin-bottom: var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

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

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

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

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

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

.font-medium {
    font-weight: var(--font-medium);
}

.font-semibold {
    font-weight: var(--font-semibold);
}

.font-bold {
    font-weight: var(--font-bold);
}