/* ==========================================================================
   TOPPERWORK - GLOBAL TYPOGRAPHY FOUNDATION
   ==========================================================================
   Phase: 1
   Purpose:
   - Consistent typography system
   - Responsive readable text
   - Heading hierarchy
   - Paragraph and text foundation
   - Long-content safety
   - Mobile-first behavior
   - WebView compatibility
   ========================================================================== */


/* ==========================================================================
   1. HEADING FOUNDATION
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    color: var(--color-text-primary);

    font-family: var(--font-family-heading, var(--font-primary));

    font-weight: var(--font-weight-bold);

    line-height: var(
        --line-height-heading,
        var(--line-height-tight)
    );

    overflow-wrap: break-word;
}


/* ==========================================================================
   2. BALANCED HEADING WRAPPING
   ========================================================================== */

@supports (text-wrap: balance) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

}


/* ==========================================================================
   3. RESPONSIVE HEADING SCALE
   ========================================================================== */

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}


h2 {
    font-size: clamp(1.75rem, 4vw, 3rem);
}


h3 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}


h4 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}


h5 {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
}


h6 {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
}


/* ==========================================================================
   4. PARAGRAPH FOUNDATION
   ========================================================================== */

p {
    margin: 0;

    color: var(--color-text-secondary);

    line-height: var(
        --line-height-base,
        var(--line-height-normal)
    );

    overflow-wrap: break-word;
}


/* ==========================================================================
   5. STRONG & EMPHASIS
   ========================================================================== */

strong,
b {
    font-weight: var(--font-weight-semibold);
}


em,
i {
    font-style: italic;
}


/* ==========================================================================
   6. SMALL TEXT
   ========================================================================== */

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


/* ==========================================================================
   7. TEXT COLOR UTILITIES
   ========================================================================== */

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


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


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


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


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


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


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


/* ==========================================================================
   8. TEXT ALIGNMENT UTILITIES
   ========================================================================== */

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


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


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


/* ==========================================================================
   9. TEXT WEIGHT UTILITIES
   ========================================================================== */

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


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


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


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


/* ==========================================================================
   10. TEXT SIZE UTILITIES
   ========================================================================== */

.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-lg {
    font-size: var(--font-size-lg);
}


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


/* ==========================================================================
   11. TEXT WRAPPING UTILITIES
   ========================================================================== */

.text-wrap {
    overflow-wrap: break-word;
    word-break: normal;
}


.text-nowrap {
    white-space: nowrap;
}


.text-truncate {
    display: block;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================================================
   12. LONG TEXT SAFETY
   ========================================================================== */

p,
li,
dd,
blockquote {
    overflow-wrap: break-word;
}


/* ==========================================================================
   13. QUOTE FOUNDATION
   ========================================================================== */

blockquote {
    margin: 0;

    color: var(--color-text-secondary);

    line-height: var(
        --line-height-base,
        var(--line-height-normal)
    );
}


/* ==========================================================================
   14. CODE FOUNDATION
   ========================================================================== */

code,
pre,
kbd,
samp {
    font-family: var(
        --font-family-mono,
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace
    );
}


/* ==========================================================================
   15. INLINE CODE
   ========================================================================== */

code {
    overflow-wrap: break-word;
}


/* ==========================================================================
   16. PRE FORMATTED TEXT
   ========================================================================== */

pre {
    margin: 0;

    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    white-space: pre-wrap;

    overflow-wrap: break-word;

    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   17. KEYBOARD TEXT
   ========================================================================== */

kbd {
    display: inline-block;

    white-space: nowrap;
}


/* ==========================================================================
   18. SELECTION COLORS
   ========================================================================== */

::selection {
    color: var(--color-selection-text);
    background: var(--color-selection-bg);
}


::-moz-selection {
    color: var(--color-selection-text);
    background: var(--color-selection-bg);
}