/**
 * Typography CSS Module
 * 
 * Design tokens and styles for ProRank SEO typography components.
 * Uses CSS custom properties for theme compatibility and dark mode support.
 * 
 * @package ProRankSEO
 */

/* Divider Styles */
.divider {
    border: none;
    border-top: var(--pr-border-width) solid var(--wp-admin-theme-color-darker-10, var(--pr-color-border));
    margin: var(--wp-g2-grid-base-size-2, var(--pr-spacing-4)) 0;
    width: 100%;
    height: 0;
    clear: both;
}

/* Heading Base Styles */
.heading {
    margin: 0 0 var(--pr-spacing-2);
    color: var(--wp-admin-theme-color-darker-20, var(--pr-color-text-primary));
    line-height: var(--pr-line-height-tight);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Heading Sizes */
.heading--size-small {
    font-size: var(--pr-font-size-sm);
}

.heading--size-medium {
    font-size: var(--pr-font-size-base);
}

.heading--size-large {
    font-size: var(--pr-font-size-xl);
}

/* Heading Weights */
.heading--weight-normal {
    font-weight: var(--pr-font-weight-normal);
}

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

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

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

/* Text Base Styles */
.text {
    margin: 0 0 var(--pr-spacing-4);
    line-height: var(--pr-line-height-normal);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.text:last-child {
    margin-bottom: 0;
}

/* Text Variants */
.text--body {
    color: var(--wp-admin-theme-color-darker-20, var(--pr-color-text-primary));
}

.text--muted {
    color: var(--wp-admin-theme-color-darker-10, var(--pr-color-text-tertiary));
}

.text--caption {
    color: var(--wp-admin-theme-color-darker-10, var(--pr-color-text-tertiary));
    font-style: italic;
}

.text--error {
    color: var(--pr-color-error);
}

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

/* Text Sizes */
.text--size-small {
    font-size: var(--pr-font-size-xs);
}

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

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

/* Text Weights */
.text--weight-normal {
    font-weight: var(--pr-font-weight-normal);
}

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

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

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

/* Dark Mode Support */
[data-theme="dark"] .divider {
    border-top-color: var(--pr-color-border-dark);
}

[data-theme="dark"] .heading {
    color: var(--pr-color-text-primary-dark);
}

[data-theme="dark"] .text--body {
    color: var(--pr-color-text-primary-dark);
}

[data-theme="dark"] .text--muted,
[data-theme="dark"] .text--caption {
    color: var(--pr-color-text-secondary-dark);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .divider {
        border-top-width: var(--pr-border-width-thick);
    }
    
    .text--muted,
    .text--caption {
        opacity: 1;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .heading,
    .text {
        transition: none;
    }
}