/* Typography Styles */

/* Headings - Responsive with Figma Design System */
.h1, h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-h1);
    color: var(--color-text-primary);
}

.h2, h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-h2);
    color: var(--color-text-primary);
}

.h3, h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-h3);
    color: var(--color-text-primary);
}

.h4, h4 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-h4);
    color: var(--color-text-primary);
}

.h5, h5 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-h5);
    color: var(--color-text-primary);
}

.h6, h6 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-h6);
    color: var(--color-text-primary);
}

/* Body Text Base Styles */
.body-text, p {
    font-family: var(--font-body);
    font-size: var(--font-size-body-normal);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-normal);
    color: var(--color-text-secondary);
}

/* Body Text Size Variants */
.body-micro {
    font-family: var(--font-body);
    font-size: var(--font-size-body-micro);
    line-height: var(--line-height-body-micro);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

.body-small {
    font-family: var(--font-body);
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body-small);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

.body-normal {
    font-family: var(--font-body);
    font-size: var(--font-size-body-normal);
    line-height: var(--line-height-body-normal);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

.body-medium {
    font-family: var(--font-body);
    font-size: var(--font-size-body-medium);
    line-height: var(--line-height-body-medium);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

.body-large {
    font-family: var(--font-body);
    font-size: var(--font-size-body-large);
    line-height: var(--line-height-body-large);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

/* Body Text Weight Modifiers */
.body-micro--light, .body-small--light, .body-normal--light, .body-medium--light, .body-large--light {
    font-weight: var(--font-weight-light);
}

.body-micro--regular, .body-small--regular, .body-normal--regular, .body-medium--regular, .body-large--regular {
    font-weight: var(--font-weight-regular);
}

.body-micro--medium, .body-small--medium, .body-normal--medium, .body-medium--medium, .body-large--medium {
    font-weight: var(--font-weight-medium);
}

.body-micro--semibold, .body-small--semibold, .body-normal--semibold, .body-medium--semibold, .body-large--semibold {
    font-weight: var(--font-weight-semibold);
}

/* Legacy body text modifiers for backward compatibility */
.body-text--light {
    font-weight: var(--font-weight-light);
}

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

.body-text--small {
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body-small);
}

.body-text--xs {
    font-size: var(--font-size-body-micro);
    line-height: var(--line-height-body-micro);
}

/* Text Colors */
.text-primary {
    color: var(--color-text-primary);
}

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

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

/* Text Alignment */
.text-left {
    text-align: left;
}

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

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

/* Font Weight Utilities */
.font-light {
    font-weight: var(--font-weight-light);
}

.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: 700;
}