/* =================================
   TYPOGRAPHY SYSTEM
   Standardized text styles for the entire app
   ================================= */

/* Typography Variables */
:root {
    /* Font Sizes - Use these instead of hardcoded values */
    --font-size-xs: 11px;      /* Labels, captions, small UI text - the floor for interactive text */
    --font-size-data: 12px;    /* Dense data cells, chips, sublabels */
    --font-size-sm: 13px;      /* Table text, compact data */
    --font-size-base: 14px;    /* Body text, buttons, inputs */
    --font-size-md: 15px;      /* Emphasized body text, table player names */
    --font-size-lg: 17px;      /* Section titles, larger headings */
    --font-size-xl: 20px;      /* Page titles */
    --font-size-2xl: 24px;     /* Major headings */

    /* 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;

    /* Letter Spacing */
    --letter-spacing-tight: -0.015em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.05em;
}

/* Base Text Styles */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-primary);
}

/* Headings */
h1, .text-2xl {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
}

h2, .text-xl {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
}

h3, .text-lg {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
}

h4, .text-md {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
}

/* Body Text Utilities */
.text-base {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

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

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

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

/* Specific Text Styles for Common UI Elements */

/* Labels and Captions */
.label,
.caption {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

/* Section Titles */
.section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

/* Table Typography */
.table-header {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.table-cell {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
}

.table-cell-player {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.table-cell-compact {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

/* Button Text */
.button-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

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

/* Input Text */
.input-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-primary);
}

/* Data/Tabular Numbers */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Numeric columns should always line up in data tables */
table {
    font-variant-numeric: tabular-nums;
}

/* Dropdown/Popup Text */
.dropdown-header {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.dropdown-item {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
}

/* Helper Text */
.help-text,
.muted {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Error Text */
.error-text {
    font-size: var(--font-size-sm);
    color: #DC2626;
    font-weight: var(--font-weight-medium);
}

/* Success Text */
.success-text {
    font-size: var(--font-size-sm);
    color: #0A6B56;
    font-weight: var(--font-weight-medium);
}