/* css/core/typography.css - Material Design 3 Typography System */

/* Import Material Symbols Font */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;600;700&display=swap');

/* Material Design 3 Typography Classes */

/* Display Scale */
.md-typescale-display-large {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-display-large-size);
    font-weight: var(--md-sys-typescale-display-large-weight);
    line-height: var(--md-sys-typescale-display-large-line-height);
    letter-spacing: -0.25px;
}

.md-typescale-display-medium {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-display-medium-size);
    font-weight: var(--md-sys-typescale-display-medium-weight);
    line-height: var(--md-sys-typescale-display-medium-line-height);
    letter-spacing: 0px;
}

.md-typescale-display-small {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-display-small-size);
    font-weight: var(--md-sys-typescale-display-small-weight);
    line-height: var(--md-sys-typescale-display-small-line-height);
    letter-spacing: 0px;
}

/* Headline Scale */
.md-typescale-headline-large {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-headline-large-size);
    font-weight: var(--md-sys-typescale-headline-large-weight);
    line-height: var(--md-sys-typescale-headline-large-line-height);
    letter-spacing: 0px;
}

.md-typescale-headline-medium {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-headline-medium-size);
    font-weight: var(--md-sys-typescale-headline-medium-weight);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    letter-spacing: 0px;
}

.md-typescale-headline-small {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-headline-small-size);
    font-weight: var(--md-sys-typescale-headline-small-weight);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    letter-spacing: 0px;
}

/* Title Scale */
.md-typescale-title-large {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    line-height: var(--md-sys-typescale-title-large-line-height);
    letter-spacing: 0px;
}

.md-typescale-title-medium {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-title-medium-weight);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    letter-spacing: 0.15px;
}

.md-typescale-title-small {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-title-small-size);
    font-weight: var(--md-sys-typescale-title-small-weight);
    line-height: var(--md-sys-typescale-title-small-line-height);
    letter-spacing: 0.1px;
}

/* Label Scale */
.md-typescale-label-large {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    line-height: var(--md-sys-typescale-label-large-line-height);
    letter-spacing: 0.1px;
}

.md-typescale-label-medium {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-label-medium-size);
    font-weight: var(--md-sys-typescale-label-medium-weight);
    line-height: var(--md-sys-typescale-label-medium-line-height);
    letter-spacing: 0.5px;
}

.md-typescale-label-small {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: var(--md-sys-typescale-label-small-weight);
    line-height: var(--md-sys-typescale-label-small-line-height);
    letter-spacing: 0.5px;
}

/* Body Scale */
.md-typescale-body-large {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-body-large-size);
    font-weight: var(--md-sys-typescale-body-large-weight);
    line-height: var(--md-sys-typescale-body-large-line-height);
    letter-spacing: 0.15px;
}

.md-typescale-body-medium {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-body-medium-size);
    font-weight: var(--md-sys-typescale-body-medium-weight);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    letter-spacing: 0.25px;
}

.md-typescale-body-small {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-body-small-size);
    font-weight: var(--md-sys-typescale-body-small-weight);
    line-height: var(--md-sys-typescale-body-small-line-height);
    letter-spacing: 0.4px;
}

/* Material Icons Base Class */
.md-icon {
    font-family: var(--md-icon-font-family);
    font-weight: var(--md-icon-font-weight);
    font-style: var(--md-icon-font-style);
    font-size: var(--md-icon-size-medium);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: var(--md-icon-font-feature-settings);
    font-variation-settings: var(--md-icon-font-variation-settings);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Material Icon Sizes */
.md-icon--small { font-size: var(--md-icon-size-small); }
.md-icon--medium { font-size: var(--md-icon-size-medium); }
.md-icon--large { font-size: var(--md-icon-size-large); }
.md-icon--xlarge { font-size: var(--md-icon-size-xlarge); }

/* Material Icon Variants */
.md-icon--filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.md-icon--outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Headings with Material Design 3 mapping */
h1 {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-headline-large-size);
    font-weight: var(--md-sys-typescale-headline-large-weight);
    line-height: var(--md-sys-typescale-headline-large-line-height);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    letter-spacing: 0px;
}

h2 {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-headline-medium-size);
    font-weight: var(--md-sys-typescale-headline-medium-weight);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    letter-spacing: 0px;
}

h3 {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-headline-small-size);
    font-weight: var(--md-sys-typescale-headline-small-weight);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    letter-spacing: 0px;
}

h4 {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    line-height: var(--md-sys-typescale-title-large-line-height);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    letter-spacing: 0px;
}

h5 {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-title-medium-weight);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    letter-spacing: 0.15px;
}

h6 {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-title-small-size);
    font-weight: var(--md-sys-typescale-title-small-weight);
    line-height: var(--md-sys-typescale-title-small-line-height);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    letter-spacing: 0.1px;
}

/* Body Text */
body {
    font-family: var(--font-family-primary);
    font-size: var(--md-sys-typescale-body-large-size);
    font-weight: var(--md-sys-typescale-body-large-weight);
    line-height: var(--md-sys-typescale-body-large-line-height);
    color: var(--text-primary);
    letter-spacing: 0.15px;
}

/* Paragraphs */
p {
    margin-bottom: var(--space-md);
    font-size: var(--md-sys-typescale-body-medium-size);
    font-weight: var(--md-sys-typescale-body-medium-weight);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    letter-spacing: 0.25px;
}

/* Legacy Classes (Backward Compatibility) */
.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); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

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

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

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

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

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

/* Special text styles */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

/* Links */
.link {
    color: var(--primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

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

.link:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Code */
code, pre {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
}

code {
    background: var(--bg-card);
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

pre {
    background: var(--bg-card);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    overflow-x: auto;
    line-height: var(--line-height-normal);
}

pre code {
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
}

/* Lists */
.list-disc {
    list-style-type: disc;
    padding-left: var(--space-lg);
}

.list-decimal {
    list-style-type: decimal;
    padding-left: var(--space-lg);
}

.list-none {
    list-style: none;
    padding-left: 0;
}

/* Badges with Material Design 3 typography */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: var(--md-sys-typescale-label-small-weight);
    line-height: var(--md-sys-typescale-label-small-line-height);
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.badge-success {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success);
}

.badge-warning {
    background: var(--warning-light);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.badge-error {
    background: var(--error-light);
    color: var(--error);
    border: 1px solid var(--error);
}

.badge-info {
    background: var(--info-light);
    color: var(--info);
    border: 1px solid var(--info);
}