/*
 * Typography overrides — 4-level style guide via Ant Design Blazor Typography.
 *
 * See https://tcm-international.atlassian.net/wiki/spaces/CC/pages/2556428292/Typography for more information.
 * Four levels (Level 1 = largest, Level 4 = smallest):
 *   Level 1 — Title:    section titles, major headers
 *   Level 2 — Control:  menu items, buttons, tabs (not "Label")
 *   Level 3 — Body:    general content; bold variant for table headers, emphasis
 *   Level 4 — Caption: small labels, breadcrumbs
 *
 * Ant Blazor mapping:
 *   Typography.Title Level="4" (Ant h4)  → Title (Level 1)
 *   Typography.Title Level="5" (Ant h5) → Control (Level 2)
 *   Typography.Text / Typography.Paragraph → Body (Level 3)
 *   Typography.Text Strong="true"       → Body bold (Level 3 variant)
 *   Caption (Level 4): no Ant equivalent — use .typography-caption or .ant-breadcrumb-link override
 */

:root {
    /* Root font-size is 10px (html { font-size: 62.5% } in app.css). 1rem = 10px., for easier rem -> px calculations */

    /* Level 1 — Title: 1.25rem (12.5px), 700, line-height 1.7rem (27.2px, ×1.36) */
    --typography-title-font-size: 1.25rem;
    --typography-title-font-weight: 700;
    --typography-title-line-height: 1.7rem;

    /* Level 2 — Control: 1rem (16px), 400, line-height 2.18rem (21.8px, ×1.3625) */
    --typography-control-font-size: 1rem;
    --typography-control-font-weight: 400;
    --typography-control-line-height: 2.18rem;

    /* Level 3 — Body: 1.4rem (14px), 400, line-height 1.75rem (17.5px, ×1.25) */
    --typography-body-font-size: 0.875rem;
    --typography-body-font-weight: 400;
    --typography-body-line-height: 1.094em;

    /* Level 3 — Body bold variant */
    --typography-body-bold-font-weight: 700;

    /* Level 4 — Caption: 1.2rem (12px), 700, line-height 1.5rem (15px, ×1.25) */
    --typography-caption-font-size: 0.75rem;
    --typography-caption-font-weight: 700;
    --typography-caption-line-height: 0.938rem;
}

/* Ant Typography — base font */
.ant-typography {
    font-family: 'Open Sans', sans-serif;
    font-size: var(--typography-body-font-size);
    font-weight: var(--typography-body-font-weight);
    line-height: var(--typography-body-line-height);
}

/* Level 1 — Title: Ant Title Level 4 → h4 */
.ant-typography h4 {
    font-size: var(--typography-title-font-size);
    font-weight: var(--typography-title-font-weight);
    line-height: var(--typography-title-line-height);
}

/* Level 2 — Control: Ant Title Level 5 → h5 */
.ant-typography h5 {
    font-size: var(--typography-control-font-size);
    font-weight: var(--typography-control-font-weight);
    line-height: var(--typography-control-line-height);
}

/* Body: Typography.Text / Paragraph (base + p) */
.ant-typography p {
    font-size: var(--typography-body-font-size);
    font-weight: var(--typography-body-font-weight);
    line-height: var(--typography-body-line-height);
}

/* Level 3 — Body bold: Typography.Text Strong="true" */
.ant-typography strong {
    font-weight: var(--typography-body-bold-font-weight);
}

/* Level 4 — Caption utility class */
/* + Ant overrides:
   - Caption overrides for Ant components that should use Caption (e.g. breadcrumbs) 
*/
.typography-caption, .ant-breadcrumb-link {
    font-size: var(--typography-caption-font-size) !important;
    font-weight: var(--typography-caption-font-weight) !important;
    line-height: var(--typography-caption-line-height) !important;
}

.ant-table-column-title {
    font-weight: var(--typography-body-bold-font-weight);
}

.ant-descriptions-item-label {
    font-weight: var(--typography-body-bold-font-weight);
}