/**
 * Esyasoft Unified Utility Cloud (UUC) Typography Styles
 */

.uuc-typography {
    font-family: var(--uuc-font-primary);
    color: var(--uuc-color-text-primary);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
.uuc-typography--h1 {
    font-size: var(--uuc-font-size-h1);
    line-height: var(--uuc-line-height-h1);
    font-weight: var(--uuc-font-weight-bold);
    letter-spacing: -0.02em;
}

.uuc-typography--h2 {
    font-size: var(--uuc-font-size-h2);
    line-height: var(--uuc-line-height-h2);
    font-weight: var(--uuc-font-weight-semibold);
    letter-spacing: -0.015em;
}

.uuc-typography--h3 {
    font-size: var(--uuc-font-size-h3);
    line-height: var(--uuc-line-height-h3);
    font-weight: var(--uuc-font-weight-semibold);
    letter-spacing: -0.01em;
}

.uuc-typography--h4 {
    font-size: var(--uuc-font-size-h4);
    line-height: var(--uuc-line-height-h4);
    font-weight: var(--uuc-font-weight-semibold);
}

.uuc-typography--h5 {
    font-size: var(--uuc-font-size-h5);
    line-height: var(--uuc-line-height-h5);
    font-weight: var(--uuc-font-weight-semibold);
}

.uuc-typography--h6 {
    font-size: var(--uuc-font-size-h6);
    line-height: var(--uuc-line-height-h6);
    font-weight: var(--uuc-font-weight-semibold);
}

/* Subtitles & Body */
.uuc-typography--subtitle1 {
    font-size: var(--uuc-font-size-subtitle1);
    line-height: var(--uuc-line-height-body1);
    font-weight: var(--uuc-font-weight-medium);
}

.uuc-typography--subtitle2 {
    font-size: var(--uuc-font-size-subtitle2);
    line-height: var(--uuc-line-height-body2);
    font-weight: var(--uuc-font-weight-medium);
}

.uuc-typography--body1 {
    font-size: var(--uuc-font-size-body1);
    line-height: var(--uuc-line-height-body1);
    font-weight: var(--uuc-font-weight-regular);
}

.uuc-typography--body2 {
    font-size: var(--uuc-font-size-body2);
    line-height: var(--uuc-line-height-body2);
    font-weight: var(--uuc-font-weight-regular);
}

.uuc-typography--caption {
    font-size: var(--uuc-font-size-caption);
    line-height: var(--uuc-line-height-caption);
    font-weight: var(--uuc-font-weight-regular);
    color: var(--uuc-color-text-secondary);
}

.uuc-typography--overline {
    font-size: var(--uuc-font-size-overline);
    line-height: var(--uuc-line-height-overline);
    font-weight: var(--uuc-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Semantic Intent Colors */
.uuc-typography--secondary {
    color: var(--uuc-color-text-secondary);
}

.uuc-typography--success {
    color: var(--uuc-color-success);
}

.uuc-typography--warning {
    color: var(--uuc-color-warning);
}

.uuc-typography--danger {
    color: var(--uuc-color-danger);
}

.uuc-typography--disabled {
    color: var(--uuc-color-text-disabled) !important;
    cursor: not-allowed;
    user-select: none;
}

/* Alignment */
.uuc-typography--align-left { text-align: left; }
.uuc-typography--align-center { text-align: center; }
.uuc-typography--align-right { text-align: right; }
.uuc-typography--align-justify { text-align: justify; }

/* Spacing */
.uuc-typography--gutter-bottom {
    margin-bottom: var(--uuc-gutter-bottom);
}

/* Text Modifiers */
.uuc-typography-code {
    font-family: var(--uuc-font-code);
    background-color: var(--uuc-code-bg);
    border: 1px solid var(--uuc-code-border);
    border-radius: 4px;
    padding: 0.15em 0.4em;
    font-size: 85%;
    color: #b91c1c;
}

.uuc-typography-kbd {
    font-family: var(--uuc-font-code);
    background-color: var(--uuc-kbd-bg);
    border: 1px solid var(--uuc-kbd-border);
    border-bottom: 2px solid var(--uuc-kbd-shadow);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 80%;
    color: var(--uuc-color-text-primary);
}

.uuc-typography-mark {
    background-color: var(--uuc-mark-bg);
    padding: 0.1em 0.3em;
    border-radius: 2px;
}

.uuc-typography-delete {
    text-decoration: line-through;
    color: var(--uuc-color-text-secondary);
}

.uuc-typography-underline {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.uuc-typography-italic {
    font-style: italic;
}

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

/* Link */
.uuc-typography-link {
    color: var(--uuc-color-link);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease-in-out, text-decoration 0.2s;
}

.uuc-typography-link:hover {
    color: var(--uuc-color-link-hover);
    text-decoration: underline;
}

.uuc-typography-link.uuc-typography--disabled {
    pointer-events: none;
    color: var(--uuc-color-text-disabled);
}

/* Ellipsis / Clamping */
.uuc-typography--ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}

/* Copy Button */
.uuc-typography-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--uuc-color-text-secondary);
    transition: all 0.2s ease;
    vertical-align: middle;
    outline: none;
}

.uuc-typography-copy-btn:hover {
    background-color: #f3f4f6;
    color: var(--uuc-color-text-primary);
}

.uuc-typography-copy-btn--copied {
    color: var(--uuc-color-success) !important;
}