/*
 * ==========================================================================
 * TYPOGRAPHY.CSS - Base Typography System
 * ==========================================================================
 * This file contains base typography styles including:
 * - Heading styles (h1-h6)
 * - Body text styles
 * - Text utility classes
 * - Link styles
 * - List styles
 * - Code and preformatted text
 *
 * All styles use CSS variables from main.css (app theme) and _variables.css (package).
 * ==========================================================================
 */

/* ==========================================================================
   BASE HEADING STYLES
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.025em;
}

/* H1 - Page Titles, Hero Headers */
h1, .h1 {
    font-size: var(--text-4xl);
    line-height: 1.2;
}

/* H2 - Section Headers */
h2, .h2 {
    font-size: var(--text-3xl);
    line-height: 1.2;
}

/* H3 - Card Titles, Subsection Headers */
h3, .h3 {
    font-size: var(--text-2xl);
    line-height: 1.375;
}

/* H4 - Widget Headers, List Titles */
h4, .h4 {
    font-size: var(--text-xl);
    line-height: 1.375;
}

/* H5 - Small Headers, Labels */
h5, .h5 {
    font-size: var(--text-lg);
    line-height: 1.5;
}

/* H6 - Smallest Headers, Captions */
h6, .h6 {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
}


/* ==========================================================================
   DISPLAY HEADINGS
   For large, prominent text like hero sections
   ========================================================================== */

.display-1 {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--text-primary);
}

.display-2 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}


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

/* Base paragraph */
p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.625;
    color: var(--text-primary);
    margin: 0;
}

/* Lead paragraph - introductory text */
.lead {
    font-size: var(--text-lg);
    line-height: 1.625;
    color: var(--text-secondary);
}

/* Small text */
small, .small {
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Extra small text - labels, captions */
.text-xs {
    font-size: var(--text-xs);
    line-height: 1.5;
}


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

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

/* Brand color text */
.text-terracotta { color: var(--accent-terracotta); }
.text-sage { color: var(--accent-sage); }
.text-navy { color: var(--accent-navy); }
.text-amber { color: var(--accent-amber); }
.text-plum { color: var(--accent-plum); }
.text-slate { color: var(--accent-slate); }

/* Status color text */
.text-success { color: var(--status-success); }
.text-warning { color: var(--status-warning); }
.text-error { color: var(--status-error); }
.text-info { color: var(--status-info); }


/* ==========================================================================
   TEXT WEIGHT UTILITIES
   ========================================================================== */

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }


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

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }


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

.uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }


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

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-primary-dark);
}

/* Underlined link variant */
.link-underline {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-underline:hover {
    text-decoration-thickness: 2px;
}

/* Subtle link - blends with text until hover */
.link-subtle {
    color: var(--text-secondary);
}

.link-subtle:hover {
    color: var(--accent-primary);
}


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

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Styled unordered list */
.list-disc {
    list-style: disc;
    padding-left: var(--space-6);
}

.list-disc li {
    margin-bottom: var(--space-1);
    line-height: 1.625;
}

/* Styled ordered list */
.list-decimal {
    list-style: decimal;
    padding-left: var(--space-6);
}

.list-decimal li {
    margin-bottom: var(--space-1);
    line-height: 1.625;
}

/* Inline list */
.list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}


/* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */

blockquote, .blockquote {
    margin: 0;
    padding: var(--space-4) var(--space-6);
    border-left: 4px solid var(--accent-terracotta);
    background: var(--bg-sidebar);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p, .blockquote p {
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.625;
}

blockquote cite, .blockquote cite {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--text-muted);
}

blockquote cite::before, .blockquote cite::before {
    content: '- ';
}


/* ==========================================================================
   CODE & PREFORMATTED TEXT
   ========================================================================== */

code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

/* Inline code */
code {
    padding: 0.125rem 0.375rem;
    background: var(--bg-sidebar);
    border-radius: var(--radius-sm);
    color: var(--accent-terracotta);
}

/* Code block */
pre {
    margin: 0;
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

pre code {
    padding: 0;
    background: none;
    border-radius: 0;
    color: inherit;
    font-size: var(--text-sm);
    line-height: 1.625;
}

/* Keyboard input */
kbd {
    padding: 0.125rem 0.375rem;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 -0.0625rem 0 var(--border);
    color: var(--text-primary);
}


/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */

hr {
    margin: var(--space-6) 0;
    border: none;
    border-top: 1px solid var(--border-light);
}

hr.thick {
    border-top-width: 2px;
}


/* ==========================================================================
   TEXT TRUNCATION
   ========================================================================== */

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   SELECTION STYLES
   ========================================================================== */

::selection {
    background: var(--accent-primary);
    color: var(--text-inverse);
}


/* ==========================================================================
   LABEL & CAPTION STYLES
   ========================================================================== */

.label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.caption {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
}

.overline {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}


/* ==========================================================================
   RESPONSIVE TYPOGRAPHY
   ========================================================================== */

@media (max-width: 768px) {
    h1, .h1 {
        font-size: var(--text-3xl);
    }

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

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

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

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