/*
 * Typography overrides — 4-level style guide via Ant Design Blazor Typography.
 *
 * Source of truth: Claude Design "TCM Connect Design System" → tokens/typography.css.
 * See https://tcm-international.atlassian.net/wiki/spaces/CC/pages/2556428292/Typography for more information.
 *
 * Sizes are absolute px, per the design system: the earlier rem values assumed
 * a 10px root (html { font-size: 62.5% }) the app never set, which produced
 * line-heights of 34.9px on controls and 15.3px on body text. Do not express
 * these in rem against an assumed root.
 *
 * Four levels (Level 1 = largest, Level 4 = smallest):
 *   Level 1 — Title:   section titles, page headers          20/700/28
 *   Level 2 — Control: menu items, buttons, tabs             16/400/24
 *   Level 3 — Body:    general content; 700 for table headers 14/400/22
 *   Level 4 — Caption: breadcrumbs, small labels             12/600/16
 * plus Eyebrow (all-caps caption for card/section labels) and Micro (11px
 * dependency hints — the floor: never set UI text below it).
 *
 * 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 the
 *   .ant-breadcrumb-link override
 */

:root {
    /* Level 1 — Title */
    --type-title-size: 20px;
    --type-title-weight: 700;
    --type-title-line: 28px;

    /* Level 2 — Control */
    --type-control-size: 16px;
    --type-control-weight: 400;
    --type-control-line: 24px;

    /* Level 3 — Body */
    --type-body-size: 14px;
    --type-body-weight: 400;
    --type-body-line: 22px;
    --type-body-weight-strong: 700;

    /* Level 4 — Caption */
    --type-caption-size: 12px;
    --type-caption-weight: 600;
    --type-caption-line: 16px;

    /* Eyebrow — an all-caps caption used for card and section labels */
    --type-eyebrow-size: 12px;
    --type-eyebrow-weight: 700;
    --type-eyebrow-tracking: 0.06em;

    /* Micro — dependency hints and inline footnotes inside dense controls */
    --type-micro-size: 11px;
    --type-micro-line: 14px;

    /* Legacy CoreCloud aliases (kept for existing styles) */
    --typography-title-font-size: var(--type-title-size);
    --typography-title-font-weight: var(--type-title-weight);
    --typography-title-line-height: var(--type-title-line);
    --typography-control-font-size: var(--type-control-size);
    --typography-control-font-weight: var(--type-control-weight);
    --typography-control-line-height: var(--type-control-line);
    --typography-body-font-size: var(--type-body-size);
    --typography-body-font-weight: var(--type-body-weight);
    --typography-body-line-height: var(--type-body-line);
    --typography-body-bold-font-weight: var(--type-body-weight-strong);
    --typography-caption-font-size: var(--type-caption-size);
    --typography-caption-font-weight: var(--type-caption-weight);
    --typography-caption-line-height: var(--type-caption-line);
}

/* Ant Typography — base font */
.ant-typography {
    font-family: var(--font-ui);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line);
}

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

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

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

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

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

/* Eyebrow utility — ALL CAPS labels inside cards and sections */
.typography-eyebrow {
    font-size: var(--type-eyebrow-size);
    font-weight: var(--type-eyebrow-weight);
    letter-spacing: var(--type-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Micro utility — dependency hints; never set UI text below this */
.typography-micro {
    font-size: var(--type-micro-size);
    line-height: var(--type-micro-line);
}

/* Mono utility — literal code ONLY: snippets, token names, API paths, config.
   An external ID or a right code in a table is UI text and stays in Open Sans;
   use .typography-tabular to line up columns of figures, not a second typeface. */
.typography-mono {
    font-family: var(--font-mono);
}

/* Tabular figures — columns of numbers that must align down the column */
.typography-tabular {
    font-variant-numeric: tabular-nums;
}

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

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

/* Confirm modal icons — Level 2 control scale */
.typography-confirm-icon {
    font-size: var(--typography-title-font-size);
}