/**
 * Typography Component System
 *
 * Standardized heading and text styles using CSS variables.
 * Replaces 8 different heading types with unified system.
 *
 * Usage:
 *   <h1>Main heading</h1>
 *   <h2>Section heading</h2>
 *   <p class="text-lg">Large text</p>
 */

/* ========================================
   TYPOGRAPHY VARIABLES
======================================== */

:root {
    /* Font sizes */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 32px;

    /* Heading sizes */
    --heading-1-size: 32px;
    --heading-2-size: 24px;
    --heading-3-size: 18px;
    --heading-4-size: 16px;

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

    /* Line heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Heading spacing */
    --heading-1-margin: 0 0 24px 0;
    --heading-2-margin: 0 0 16px 0;
    --heading-3-margin: 0 0 12px 0;
    --heading-4-margin: 0 0 8px 0;

    /* Paragraph spacing */
    --paragraph-margin: 0 0 16px 0;
}

/* ========================================
   HEADINGS
======================================== */

h1,
.heading-1 {
    font-size: var(--heading-1-size);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--theme-text-primary);
    margin: var(--heading-1-margin);
}

h2,
.heading-2 {
    font-size: var(--heading-2-size);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--theme-text-primary);
    margin: var(--heading-2-margin);
}

h3,
.heading-3 {
    font-size: var(--heading-3-size);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--theme-text-primary);
    margin: var(--heading-3-margin);
}

h4,
.heading-4 {
    font-size: var(--heading-4-size);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    color: var(--theme-text-primary);
    margin: var(--heading-4-margin);
}

/* Page Title (used in header) */
.page-title {
    font-size: var(--heading-1-size);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--theme-text-primary);
    margin: 0;
    text-shadow: var(--theme-text-shadow, none);
}

/* Section Title (major page sections) */
.section-title {
    font-size: var(--heading-2-size);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--theme-text-primary);
    margin: 0 0 16px 0;
    padding: 12px 20px;
    background: var(--theme-section-title-bg, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
}

/* Card Title */
.card-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--theme-text-primary);
    margin: 0 0 8px 0;
}

/* Subtitle */
.subtitle {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--theme-text-secondary);
    margin: 0 0 12px 0;
}

/* ========================================
   BODY TEXT
======================================== */

p,
.text {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--theme-text-primary);
    margin: var(--paragraph-margin);
}

/* Text Size Utilities */
.text-xs {
    font-size: var(--text-xs);
}

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

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

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

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

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

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

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

/* ========================================
   FONT WEIGHT UTILITIES
======================================== */

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

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

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

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

/* ========================================
   TEXT COLOR UTILITIES
======================================== */

.text-primary {
    color: var(--theme-text-primary);
}

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

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

.text-success {
    color: var(--theme-btn-success-bg);
}

.text-danger {
    color: var(--theme-btn-danger-bg);
}

.text-warning {
    color: var(--theme-btn-warning-bg, rgb(251, 191, 36));
}

.text-info {
    color: var(--theme-btn-primary-bg);
}

/* ========================================
   TEXT ALIGNMENT
======================================== */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

/* ========================================
   TEXT TRANSFORM
======================================== */

.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}

/* ========================================
   TEXT DECORATION
======================================== */

.text-underline {
    text-decoration: underline;
}

.text-no-underline {
    text-decoration: none;
}

.text-line-through {
    text-decoration: line-through;
}

/* ========================================
   LINE HEIGHT UTILITIES
======================================== */

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

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

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

/* ========================================
   SPECIAL TEXT STYLES
======================================== */

/* Link Styles */
a,
.link {
    color: var(--theme-link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
.link:hover {
    color: var(--theme-link-hover-color);
    text-decoration: underline;
}

/* Code/Monospace */
code,
.code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    padding: 2px 6px;
    background: var(--theme-shadow-lightest);
    border-radius: 3px;
}

pre {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    padding: 12px;
    background: var(--theme-shadow-lightest);
    border-radius: 6px;
    overflow-x: auto;
}

/* Emphasis */
strong,
.strong {
    font-weight: var(--font-bold);
}

em,
.em {
    font-style: italic;
}

/* Truncate Text */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   LEGACY CLASS MAPPINGS (Temporary)
======================================== */

.points-box-header {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--theme-text-primary);
}

.points-box-subtitle {
    font-size: var(--text-sm);
    color: var(--theme-text-secondary);
}

.dashboard-card-subtitle {
    font-size: var(--text-xs);
    color: var(--theme-text-muted);
    text-transform: uppercase;
}

/* Duplicate .stat-label removed - definition in components/badges.css:247 */
/* Duplicate .setting-label removed - definition in admin.css:46 */

.setting-description {
    font-size: var(--text-sm);
    color: var(--theme-text-muted);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media (max-width: 768px) {
    :root {
        /* Slightly smaller headings on mobile */
        --heading-1-size: 28px;
        --heading-2-size: 22px;
        --heading-3-size: 16px;
        --heading-4-size: 14px;
    }

    h1, .heading-1 {
        margin-bottom: 16px;
    }

    h2, .heading-2 {
        margin-bottom: 12px;
    }
}