/*
 * OptionsPlay Typography Classes
 * Source: UI/UX Team Brand Style Guide (op-typography.css)
 * Requires design-tokens.css to be loaded first
 */

/* Headings */
.op-heading-1 {
    font-size: var(--op-text-3xl);      /* 24px */
    font-weight: var(--op-font-bold);
    line-height: var(--op-leading-tight);
    color: var(--op-text-primary);
}

.op-heading-2 {
    font-size: var(--op-text-2xl);      /* 20px */
    font-weight: var(--op-font-bold);
    line-height: var(--op-leading-tight);
}

.op-heading-3 {
    font-size: var(--op-text-xl);       /* 18px */
    font-weight: var(--op-font-semibold);
    line-height: var(--op-leading-tight);
}

/* Body Text */
.op-body {
    font-size: var(--op-text-base);     /* 14px */
    font-weight: var(--op-font-regular);
    line-height: var(--op-leading-normal);
}

.op-body-small {
    font-size: var(--op-text-sm);       /* 12px */
}

/* Labels */
.op-label {
    font-size: var(--op-text-sm);
    font-weight: var(--op-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--op-text-secondary);
}

/* Monospace — for stock prices, percentages, numeric data */
.op-mono {
    font-family: var(--op-font-family-mono);
    font-variant-numeric: tabular-nums;
}