/*
 * Origin typography tokens and application bridge
 *
 * Load order:
 *   1. Radzen theme CSS
 *   2. app.css
 *   3. origin-layout.css
 *   4. origin-motion.css
 *   5. origin-semantic-theme.css
 *   6. origin-effects.css
 *   7. origin-typography.css
 *
 * These definitions replace the legacy hardcoded type
 * values while preserving the existing Origin and Radzen class names.
 *
 * DM Sans must be loaded by the host application before this stylesheet.
 * Token source: Origin Foundations Figma file, exported 11 September 2026.
 */

:root {
    /* Typography primitives */
    --font-family-dm-sans: "DM Sans", sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font sizes and line heights use root-relative units. */
    --font-size-display: 3rem;
    --font-size-h1: 2rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1rem;
    --font-size-h6: 0.875rem;
    --font-size-paragraph-lg: 1rem;
    --font-size-paragraph: 0.875rem;
    --font-size-supporting: 0.75rem;
    --font-size-label-lg: 1rem;
    --font-size-label-md: 0.875rem;
    --font-size-label-sm: 0.75rem;

    --line-height-3xlg: 4.5rem;
    --line-height-2xlg: 2.5rem;
    --line-height-xlg: 2.25rem;
    --line-height-lg: 2rem;
    --line-height-md: 1.75rem;
    --line-height-s: 1.5rem;
    --line-height-xs: 1.25rem;
    --line-height-xxs: 1rem;

    /* Tracking scales with the font size of the element using the token. */
    --letter-spacing-negative-0-020em: -0.02em;
    --letter-spacing-negative-0-015em: -0.015em;
    --letter-spacing-negative-0-01em: -0.01em;
    --letter-spacing-negative-0-005em: -0.005em;
    --letter-spacing-0em: 0;
    --letter-spacing-positive-0-06em: 0.06em;

    /* Composite typography semantics */
    --type-display-font-family: var(--font-family-dm-sans);
    --type-display-font-size: var(--font-size-display);
    --type-display-line-height: var(--line-height-3xlg);
    --type-display-font-weight: var(--font-weight-bold);
    --type-display-letter-spacing: var(--letter-spacing-negative-0-020em);

    --type-heading-1-font-family: var(--font-family-dm-sans);
    --type-heading-1-font-size: var(--font-size-h1);
    --type-heading-1-line-height: var(--line-height-2xlg);
    --type-heading-1-font-weight: var(--font-weight-bold);
    --type-heading-1-letter-spacing: var(--letter-spacing-negative-0-015em);

    --type-heading-2-font-family: var(--font-family-dm-sans);
    --type-heading-2-font-size: var(--font-size-h2);
    --type-heading-2-line-height: var(--line-height-xlg);
    --type-heading-2-font-weight: var(--font-weight-bold);
    --type-heading-2-letter-spacing: var(--letter-spacing-negative-0-01em);

    --type-heading-3-font-family: var(--font-family-dm-sans);
    --type-heading-3-font-size: var(--font-size-h3);
    --type-heading-3-line-height: var(--line-height-lg);
    --type-heading-3-font-weight: var(--font-weight-bold);
    --type-heading-3-letter-spacing: var(--letter-spacing-negative-0-005em);

    --type-heading-4-font-family: var(--font-family-dm-sans);
    --type-heading-4-font-size: var(--font-size-h4);
    --type-heading-4-line-height: var(--line-height-md);
    --type-heading-4-font-weight: var(--font-weight-bold);
    --type-heading-4-letter-spacing: var(--letter-spacing-0em);

    --type-heading-5-font-family: var(--font-family-dm-sans);
    --type-heading-5-font-size: var(--font-size-h5);
    --type-heading-5-line-height: var(--line-height-s);
    --type-heading-5-font-weight: var(--font-weight-bold);
    --type-heading-5-letter-spacing: var(--letter-spacing-0em);

    --type-heading-6-font-family: var(--font-family-dm-sans);
    --type-heading-6-font-size: var(--font-size-h6);
    --type-heading-6-line-height: var(--line-height-xs);
    --type-heading-6-font-weight: var(--font-weight-bold);
    --type-heading-6-letter-spacing: var(--letter-spacing-positive-0-06em);

    --type-paragraph-lg-font-family: var(--font-family-dm-sans);
    --type-paragraph-lg-font-size: var(--font-size-paragraph-lg);
    --type-paragraph-lg-line-height: var(--line-height-s);
    --type-paragraph-lg-font-weight: var(--font-weight-regular);
    --type-paragraph-lg-letter-spacing: var(--letter-spacing-0em);

    --type-paragraph-font-family: var(--font-family-dm-sans);
    --type-paragraph-font-size: var(--font-size-paragraph);
    --type-paragraph-line-height: var(--line-height-xs);
    --type-paragraph-font-weight: var(--font-weight-regular);
    --type-paragraph-letter-spacing: var(--letter-spacing-0em);

    --type-supporting-font-family: var(--font-family-dm-sans);
    --type-supporting-font-size: var(--font-size-supporting);
    --type-supporting-line-height: var(--line-height-xxs);
    --type-supporting-font-weight: var(--font-weight-regular);
    --type-supporting-letter-spacing: var(--letter-spacing-0em);

    --type-label-lg-font-family: var(--font-family-dm-sans);
    --type-label-lg-font-size: var(--font-size-label-lg);
    --type-label-lg-line-height: var(--line-height-s);
    --type-label-lg-font-weight: var(--font-weight-medium);
    --type-label-lg-letter-spacing: var(--letter-spacing-0em);

    --type-label-md-font-family: var(--font-family-dm-sans);
    --type-label-md-font-size: var(--font-size-label-md);
    --type-label-md-line-height: var(--line-height-xs);
    --type-label-md-font-weight: var(--font-weight-medium);
    --type-label-md-letter-spacing: var(--letter-spacing-0em);

    --type-label-sm-font-family: var(--font-family-dm-sans);
    --type-label-sm-font-size: var(--font-size-label-sm);
    --type-label-sm-line-height: var(--line-height-xxs);
    --type-label-sm-font-weight: var(--font-weight-medium);
    --type-label-sm-letter-spacing: var(--letter-spacing-positive-0-06em);

    /* Existing Radzen variables consumed by app.css */
    --rz-text-font-family: var(--font-family-dm-sans);
    --rz-body-font-size: var(--type-paragraph-font-size);
    --rz-body-line-height: var(--type-paragraph-line-height);
    --rz-panel-menu-font-size: var(--type-label-lg-font-size);
    --rz-panel-menu-font-weight: var(--type-label-lg-font-weight);

    /* Additional Radzen typography hooks. Unused hooks are harmless. */
    --rz-button-font-size: var(--type-label-md-font-size);
    --rz-button-font-weight: var(--type-label-md-font-weight);
    --rz-input-font-size: var(--type-paragraph-font-size);
    --rz-input-line-height: var(--type-paragraph-line-height);
}

/* Figma local text-style equivalents */
.type-display {
    font-family: var(--type-display-font-family);
    font-size: var(--type-display-font-size);
    line-height: var(--type-display-line-height);
    font-weight: var(--type-display-font-weight);
    letter-spacing: var(--type-display-letter-spacing);
}

h1,
.type-heading-1,
.heading1-b,
.rz-dialog-side-title {
    font-family: var(--type-heading-1-font-family);
    font-size: var(--type-heading-1-font-size);
    line-height: var(--type-heading-1-line-height);
    font-weight: var(--type-heading-1-font-weight);
    letter-spacing: var(--type-heading-1-letter-spacing);
}

h2,
.type-heading-2,
.heading2-b {
    font-family: var(--type-heading-2-font-family);
    font-size: var(--type-heading-2-font-size);
    line-height: var(--type-heading-2-line-height);
    font-weight: var(--type-heading-2-font-weight);
    letter-spacing: var(--type-heading-2-letter-spacing);
}

h3,
.type-heading-3,
.heading3-b,
.rz-dialog-title {
    font-family: var(--type-heading-3-font-family);
    font-size: var(--type-heading-3-font-size);
    line-height: var(--type-heading-3-line-height);
    font-weight: var(--type-heading-3-font-weight);
    letter-spacing: var(--type-heading-3-letter-spacing);
}

h4,
.type-heading-4,
.heading4-b {
    font-family: var(--type-heading-4-font-family);
    font-size: var(--type-heading-4-font-size);
    line-height: var(--type-heading-4-line-height);
    font-weight: var(--type-heading-4-font-weight);
    letter-spacing: var(--type-heading-4-letter-spacing);
}

h5,
.type-heading-5,
.heading5-b {
    font-family: var(--type-heading-5-font-family);
    font-size: var(--type-heading-5-font-size);
    line-height: var(--type-heading-5-line-height);
    font-weight: var(--type-heading-5-font-weight);
    letter-spacing: var(--type-heading-5-letter-spacing);
}

h6,
.type-heading-6,
.heading6-b {
    font-family: var(--type-heading-6-font-family);
    font-size: var(--type-heading-6-font-size);
    line-height: var(--type-heading-6-line-height);
    font-weight: var(--type-heading-6-font-weight);
    letter-spacing: var(--type-heading-6-letter-spacing);
}

.type-paragraph-lg,
.body-16 {
    font-family: var(--type-paragraph-lg-font-family);
    font-size: var(--type-paragraph-lg-font-size);
    line-height: var(--type-paragraph-lg-line-height);
    font-weight: var(--type-paragraph-lg-font-weight);
    letter-spacing: var(--type-paragraph-lg-letter-spacing);
}

html,
body,
.type-paragraph,
.body-14 {
    font-family: var(--type-paragraph-font-family);
    font-size: var(--type-paragraph-font-size);
    line-height: var(--type-paragraph-line-height);
    font-weight: var(--type-paragraph-font-weight);
    letter-spacing: var(--type-paragraph-letter-spacing);
}

.type-supporting,
.supporting-text {
    font-family: var(--type-supporting-font-family);
    font-size: var(--type-supporting-font-size);
    line-height: var(--type-supporting-line-height);
    font-weight: var(--type-supporting-font-weight);
    letter-spacing: var(--type-supporting-letter-spacing);
}

.type-label-lg,
.label-16 {
    font-family: var(--type-label-lg-font-family);
    font-size: var(--type-label-lg-font-size);
    line-height: var(--type-label-lg-line-height);
    font-weight: var(--type-label-lg-font-weight);
    letter-spacing: var(--type-label-lg-letter-spacing);
}

.type-label-md,
.rz-button,
.rz-fileupload-choose {
    font-family: var(--type-label-md-font-family);
    font-size: var(--type-label-md-font-size);
    line-height: var(--type-label-md-line-height);
    font-weight: var(--type-label-md-font-weight);
    letter-spacing: var(--type-label-md-letter-spacing);
}

.type-label-sm,
.rz-badge {
    font-family: var(--type-label-sm-font-family);
    font-size: var(--type-label-sm-font-size);
    line-height: var(--type-label-sm-line-height);
    font-weight: var(--type-label-sm-font-weight);
    letter-spacing: var(--type-label-sm-letter-spacing);
}

/* Legacy light-heading classes retained until markup migration is complete. */
.heading1,
.heading2,
.heading3,
.heading4,
.heading5,
.heading6 {
    font-weight: var(--font-weight-light);
}

.heading1 {
    font-size: var(--type-heading-1-font-size);
    line-height: var(--type-heading-1-line-height);
    letter-spacing: var(--type-heading-1-letter-spacing);
}

.heading2 {
    font-size: var(--type-heading-2-font-size);
    line-height: var(--type-heading-2-line-height);
    letter-spacing: var(--type-heading-2-letter-spacing);
}

.heading3 {
    font-size: var(--type-heading-3-font-size);
    line-height: var(--type-heading-3-line-height);
    letter-spacing: var(--type-heading-3-letter-spacing);
}

.heading4 {
    font-size: var(--type-heading-4-font-size);
    line-height: var(--type-heading-4-line-height);
    letter-spacing: var(--type-heading-4-letter-spacing);
}

.heading5 {
    font-size: var(--type-heading-5-font-size);
    line-height: var(--type-heading-5-line-height);
    letter-spacing: var(--type-heading-5-letter-spacing);
}

.heading6 {
    font-size: var(--type-heading-6-font-size);
    line-height: var(--type-heading-6-line-height);
    letter-spacing: var(--type-heading-6-letter-spacing);
}

/* Legacy semibold body utilities retained with the approved size and rhythm. */
.body-16-sb {
    font-family: var(--type-paragraph-lg-font-family);
    font-size: var(--type-paragraph-lg-font-size);
    line-height: var(--type-paragraph-lg-line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--type-paragraph-lg-letter-spacing);
}

.body-14-sb {
    font-family: var(--type-paragraph-font-family);
    font-size: var(--type-paragraph-font-size);
    line-height: var(--type-paragraph-line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--type-paragraph-letter-spacing);
}

/* Common Radzen text-bearing components */
.rz-inputtext,
.rz-dropdown-label,
.rz-dropdown-item,
.rz-grid-table td {
    font-family: var(--type-paragraph-font-family);
    font-size: var(--type-paragraph-font-size);
    line-height: var(--type-paragraph-line-height);
    font-weight: var(--type-paragraph-font-weight);
    letter-spacing: var(--type-paragraph-letter-spacing);
}

.rz-grid-table th,
.rz-form-field-label,
.rz-panel-menu .rz-navigation-item {
    font-family: var(--type-label-md-font-family);
    font-size: var(--type-label-md-font-size);
    line-height: var(--type-label-md-line-height);
    font-weight: var(--type-label-md-font-weight);
    letter-spacing: var(--type-label-md-letter-spacing);
}