/* Typography Tokens */

@font-face {
    font-family: '72';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../../fonts/sap-72/72-Light.woff2') format('woff2');
}

@font-face {
    font-family: '72';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/sap-72/72-Regular.woff2') format('woff2');
}

@font-face {
    font-family: '72';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/sap-72/72-SemiboldDuplex.woff2') format('woff2');
}

@font-face {
    font-family: '72';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/sap-72/72-Bold.woff2') format('woff2');
}

@font-face {
    font-family: '72';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../../fonts/sap-72/72-Black.woff2') format('woff2');
}

@font-face {
    font-family: '72Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/sap-72/72Mono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: '72Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/sap-72/72Mono-Bold.woff2') format('woff2');
}

:root {
    /* Font stays SAP 72 per project decision; sizing below follows the Material 3 type scale. */
    --font-sans: '72', '72full', Arial, Helvetica, sans-serif;
    --font-mono: '72Mono', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --font-feat-default: normal;
    --font-feat-tabular: 'tnum', 'lnum';

    /* Material 3 type scale (m3.material.io baseline sizes/line-heights/weights) */
    --m3-display-large-size: 57px;
    --m3-display-large-line: 64px;
    --m3-display-large-weight: 400;

    --m3-display-medium-size: 45px;
    --m3-display-medium-line: 52px;
    --m3-display-medium-weight: 400;

    --m3-display-small-size: 36px;
    --m3-display-small-line: 44px;
    --m3-display-small-weight: 400;

    --m3-headline-large-size: 32px;
    --m3-headline-large-line: 40px;
    --m3-headline-large-weight: 400;

    --m3-headline-medium-size: 28px;
    --m3-headline-medium-line: 36px;
    --m3-headline-medium-weight: 400;

    --m3-headline-small-size: 24px;
    --m3-headline-small-line: 32px;
    --m3-headline-small-weight: 400;

    --m3-title-large-size: 22px;
    --m3-title-large-line: 28px;
    --m3-title-large-weight: 400;

    --m3-title-medium-size: 16px;
    --m3-title-medium-line: 24px;
    --m3-title-medium-weight: 500;

    --m3-title-small-size: 14px;
    --m3-title-small-line: 20px;
    --m3-title-small-weight: 500;

    --m3-body-large-size: 16px;
    --m3-body-large-line: 24px;
    --m3-body-large-weight: 400;

    --m3-body-medium-size: 14px;
    --m3-body-medium-line: 20px;
    --m3-body-medium-weight: 400;

    --m3-body-small-size: 12px;
    --m3-body-small-line: 16px;
    --m3-body-small-weight: 400;

    --m3-label-large-size: 14px;
    --m3-label-large-line: 20px;
    --m3-label-large-weight: 500;

    --m3-label-medium-size: 12px;
    --m3-label-medium-line: 16px;
    --m3-label-medium-weight: 500;

    --m3-label-small-size: 11px;
    --m3-label-small-line: 16px;
    --m3-label-small-weight: 500;

    /* Material scale - exact spec sizes */
    --ts-h1-size: 96px;
    --ts-h1-line: 112px;
    --ts-h1-weight: 300;
    --ts-h1-tracking: -1.5px;

    --ts-h2-size: 60px;
    --ts-h2-line: 72px;
    --ts-h2-weight: 300;
    --ts-h2-tracking: -0.5px;

    --ts-h3-size: 48px;
    --ts-h3-line: 56px;
    --ts-h3-weight: 400;
    --ts-h3-tracking: 0;

    --ts-h4-size: 34px;
    --ts-h4-line: 42px;
    --ts-h4-weight: 400;
    --ts-h4-tracking: 0.25px;

    --ts-h5-size: 24px;
    --ts-h5-line: 32px;
    --ts-h5-weight: 400;
    --ts-h5-tracking: 0;

    --ts-h6-size: 20px;
    --ts-h6-line: 28px;
    --ts-h6-weight: 500;
    --ts-h6-tracking: 0.15px;

    --ts-subtitle1-size: 16px;
    --ts-subtitle1-line: 24px;
    --ts-subtitle1-weight: 400;
    --ts-subtitle1-tracking: 0.15px;

    --ts-subtitle2-size: 14px;
    --ts-subtitle2-line: 20px;
    --ts-subtitle2-weight: 500;
    --ts-subtitle2-tracking: 0.1px;

    --ts-body1-size: 16px;
    --ts-body1-line: 24px;
    --ts-body1-weight: 400;
    --ts-body1-tracking: 0.5px;

    --ts-body2-size: 14px;
    --ts-body2-line: 20px;
    --ts-body2-weight: 400;
    --ts-body2-tracking: 0.25px;

    --ts-caption-size: 12px;
    --ts-caption-line: 16px;
    --ts-caption-weight: 400;
    --ts-caption-tracking: 0.4px;

    --ts-overline-size: 12px;
    --ts-overline-line: 16px;
    --ts-overline-weight: 500;
    --ts-overline-tracking: 1.5px;

    --ts-button-size: 14px;
    --ts-button-line: 20px;
    --ts-button-weight: 500;
    --ts-button-tracking: 0.4px;
}

/* Utility classes - drop-in replacements for inline font sizes */
.ts-h1 {
    font-family: var(--font-sans);
    font-size: var(--ts-h1-size);
    line-height: var(--ts-h1-line);
    font-weight: var(--ts-h1-weight);
    letter-spacing: var(--ts-h1-tracking);
    margin: 0;
}

.ts-h2 {
    font-family: var(--font-sans);
    font-size: var(--ts-h2-size);
    line-height: var(--ts-h2-line);
    font-weight: var(--ts-h2-weight);
    letter-spacing: var(--ts-h2-tracking);
    margin: 0;
}

.ts-h3 {
    font-family: var(--font-sans);
    font-size: var(--ts-h3-size);
    line-height: var(--ts-h3-line);
    font-weight: var(--ts-h3-weight);
    letter-spacing: var(--ts-h3-tracking);
    margin: 0;
}

.ts-h4 {
    font-family: var(--font-sans);
    font-size: var(--ts-h4-size);
    line-height: var(--ts-h4-line);
    font-weight: var(--ts-h4-weight);
    letter-spacing: var(--ts-h4-tracking);
    margin: 0;
}

.ts-h5 {
    font-family: var(--font-sans);
    font-size: var(--ts-h5-size);
    line-height: var(--ts-h5-line);
    font-weight: var(--ts-h5-weight);
    letter-spacing: var(--ts-h5-tracking);
    margin: 0;
}

.ts-h6 {
    font-family: var(--font-sans);
    font-size: var(--ts-h6-size);
    line-height: var(--ts-h6-line);
    font-weight: var(--ts-h6-weight);
    letter-spacing: var(--ts-h6-tracking);
    margin: 0;
}

.ts-subtitle1 {
    font-family: var(--font-sans);
    font-size: var(--ts-subtitle1-size);
    line-height: var(--ts-subtitle1-line);
    font-weight: var(--ts-subtitle1-weight);
    letter-spacing: var(--ts-subtitle1-tracking);
}

.ts-subtitle2 {
    font-family: var(--font-sans);
    font-size: var(--ts-subtitle2-size);
    line-height: var(--ts-subtitle2-line);
    font-weight: var(--ts-subtitle2-weight);
    letter-spacing: var(--ts-subtitle2-tracking);
}

.ts-body1 {
    font-family: var(--font-sans);
    font-size: var(--ts-body1-size);
    line-height: var(--ts-body1-line);
    font-weight: var(--ts-body1-weight);
    letter-spacing: var(--ts-body1-tracking);
}

.ts-body2 {
    font-family: var(--font-sans);
    font-size: var(--ts-body2-size);
    line-height: var(--ts-body2-line);
    font-weight: var(--ts-body2-weight);
    letter-spacing: var(--ts-body2-tracking);
}

.ts-caption {
    font-family: var(--font-sans);
    font-size: var(--ts-caption-size);
    line-height: var(--ts-caption-line);
    font-weight: var(--ts-caption-weight);
    letter-spacing: var(--ts-caption-tracking);
}

.ts-overline {
    font-family: var(--font-sans);
    font-size: var(--ts-overline-size);
    line-height: var(--ts-overline-line);
    font-weight: var(--ts-overline-weight);
    letter-spacing: var(--ts-overline-tracking);
    text-transform: uppercase;
}

.ts-button {
    font-family: var(--font-sans);
    font-size: var(--ts-button-size);
    line-height: var(--ts-button-line);
    font-weight: var(--ts-button-weight);
    letter-spacing: var(--ts-button-tracking);
    text-transform: uppercase;
}

/* Tabular figures - apply to numeric values for column alignment */
.ts-num {
    font-feature-settings: var(--font-feat-tabular);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Material 3 type-scale utility classes */
.m3-headline-large { font-family: var(--font-sans); font-size: var(--m3-headline-large-size); line-height: var(--m3-headline-large-line); font-weight: var(--m3-headline-large-weight); margin: 0; }
.m3-headline-medium { font-family: var(--font-sans); font-size: var(--m3-headline-medium-size); line-height: var(--m3-headline-medium-line); font-weight: var(--m3-headline-medium-weight); margin: 0; }
.m3-headline-small { font-family: var(--font-sans); font-size: var(--m3-headline-small-size); line-height: var(--m3-headline-small-line); font-weight: var(--m3-headline-small-weight); margin: 0; }
.m3-title-large { font-family: var(--font-sans); font-size: var(--m3-title-large-size); line-height: var(--m3-title-large-line); font-weight: var(--m3-title-large-weight); margin: 0; }
.m3-title-medium { font-family: var(--font-sans); font-size: var(--m3-title-medium-size); line-height: var(--m3-title-medium-line); font-weight: var(--m3-title-medium-weight); margin: 0; }
.m3-title-small { font-family: var(--font-sans); font-size: var(--m3-title-small-size); line-height: var(--m3-title-small-line); font-weight: var(--m3-title-small-weight); margin: 0; }
.m3-body-large { font-family: var(--font-sans); font-size: var(--m3-body-large-size); line-height: var(--m3-body-large-line); font-weight: var(--m3-body-large-weight); }
.m3-body-medium { font-family: var(--font-sans); font-size: var(--m3-body-medium-size); line-height: var(--m3-body-medium-line); font-weight: var(--m3-body-medium-weight); }
.m3-body-small { font-family: var(--font-sans); font-size: var(--m3-body-small-size); line-height: var(--m3-body-small-line); font-weight: var(--m3-body-small-weight); }
.m3-label-large { font-family: var(--font-sans); font-size: var(--m3-label-large-size); line-height: var(--m3-label-large-line); font-weight: var(--m3-label-large-weight); }
.m3-label-medium { font-family: var(--font-sans); font-size: var(--m3-label-medium-size); line-height: var(--m3-label-medium-line); font-weight: var(--m3-label-medium-weight); }
.m3-label-small { font-family: var(--font-sans); font-size: var(--m3-label-small-size); line-height: var(--m3-label-small-line); font-weight: var(--m3-label-small-weight); }