/*
 * src/CountyProfile.UI.Web/wwwroot/css/typography-tokens.css
 * Project-local typography tokens. Single source of truth for all font-size /
 * font-weight / line-height values used by the Typography components and the
 * ApexCharts JS layer. Library tokens (font-family, color) are NOT redeclared
 * here — they live in DHCS.MESMD.Lib.UI's variables.css.
 *
 * Naming: --dhcs-font-{context}-{property} — name-preserving promotion path
 * to the library when the typography port lands (see .scratch/lib-ui-typography-port).
 */

:root {
    /* WCAG 2.1 AAA 1.4.8 — minimum paragraph leading (SiteImprove / WCAG “line height 1.5”) */
    --dhcs-paragraph-line-height: 1.5;

    /* Card-level chart text */
    --dhcs-font-chart-title-size: 20px;
    --dhcs-font-chart-title-weight: 700;
    --dhcs-font-chart-title-line-height: 16px;

    --dhcs-font-chart-subtitle-size: 1rem;
    --dhcs-font-chart-subtitle-weight: 400;
    /* WCAG 2.1 AAA 1.4.8 / SiteImprove: paragraph line-height ≥ 1.5 × font-size */
    --dhcs-font-chart-subtitle-line-height: 1.5;

    --dhcs-font-chart-caption-size: 16px;
    --dhcs-font-chart-caption-weight: 400;
    --dhcs-font-chart-caption-line-height: 20px;

    /* ApexCharts internal text */
    --dhcs-font-chart-axis-title-size: 16px;
    --dhcs-font-chart-axis-title-weight: 700;
    --dhcs-font-chart-axis-title-line-height: 12px;

    --dhcs-font-chart-axis-label-size: 1rem;
    --dhcs-font-chart-axis-label-weight: 700;
    --dhcs-font-chart-axis-label-line-height: 20px;

    --dhcs-font-chart-data-label-size: 11px;
    --dhcs-font-chart-data-label-weight: 800;
    --dhcs-font-chart-data-label-line-height: 20px;

    /* MainLayout brand wordmark */
    --dhcs-font-brand-text-size: 14px;
    --dhcs-font-brand-text-weight: 700;
    --dhcs-font-brand-text-line-height: 16px;

    /* Compare empty-state row message */
    --dhcs-font-empty-state-size: 16px;
    --dhcs-font-empty-state-weight: 600;
    --dhcs-font-empty-state-line-height: 24px;

    /* SectionHeading shared component (e.g., "Sex" / "Age" / "Race/Ethnicity") */
    --dhcs-font-section-heading-size: 20px;
    --dhcs-font-section-heading-weight: 700;
    --dhcs-font-section-heading-line-height: 16px;

    /* CountyLabel default — column header above chart pair */
    --dhcs-font-county-label-size: 20px;
    --dhcs-font-county-label-weight: 700;
    --dhcs-font-county-label-line-height: 16px;

    /* CountyLabel small — narrow-width per-chart county sublabel */
    --dhcs-font-county-label-small-size: 14px;
    --dhcs-font-county-label-small-weight: 700;
    --dhcs-font-county-label-small-line-height: 20px;

    /* StatusTag inner text */
    --dhcs-font-status-tag-text-size: 14px;
    --dhcs-font-status-tag-text-weight: 600;
    --dhcs-font-status-tag-text-line-height: 16px;

    /* Compare table header text — covers <th> column headers AND the
       County A / County B labels inside the dropdown selectors */
    --dhcs-font-table-header-text-size: 14px;
    --dhcs-font-table-header-text-weight: 700;
    --dhcs-font-table-header-text-line-height: 16px;

    /* Compare metric-name (tbody row header), default mode */
    --dhcs-font-metric-name-size: 14px;
    --dhcs-font-metric-name-weight: 600;
    --dhcs-font-metric-name-line-height: 20px;

    /* Compare metric-name, card mode (when table reflows to cards at <600px) */
    --dhcs-font-metric-name-card-size: 1.25rem;
    --dhcs-font-metric-name-card-weight: 700;
    --dhcs-font-metric-name-card-line-height: 24px;

    /* Homelessness Medi-Cal subtitle line */
    --dhcs-font-homeless-medi-cal-subtitle-family: "Source Sans 3";

    /* CollapsibleSubCard subtitle regular variant for Figma-matched sub-card headers */
    --dhcs-font-collapsible-sub-card-subtitle-regular-weight: 400;

    /* Dashboard-tabs MudBlazor overrides (rem-based to preserve user-font-size
       accessibility behavior) */
    --dhcs-font-tab-weight: 600;
    --dhcs-font-tab-size-md: 0.75rem;
    --dhcs-font-tab-size-sm: 0.7rem;

    /* Compare page — metric value cells and card-mode county labels */
    --dhcs-font-compare-metric-value-weight: 600;

    /* Landing page — "Select County" label sitting inline-left of the dropdown */
    --dhcs-font-landing-selector-label-weight: 600;

    /* Skip Navigation — accessibility focus link */
    --dhcs-font-skip-nav-size: 0.875rem;
    --dhcs-font-skip-nav-weight: 500;

    /* Watermark overlay — debug/preview text, fluid sizing */
    --dhcs-font-watermark-size: clamp(1.25rem, 10vw, 4rem);
    --dhcs-font-watermark-weight: 800;
    --dhcs-font-watermark-line-height: 1.1;
    --dhcs-font-watermark-subtitle-size: clamp(0.75rem, 3.5vw, 1.5rem);
    --dhcs-font-watermark-subtitle-weight: 700;
    --dhcs-font-watermark-subtitle-line-height: 1.3;

    /* chart-caption italic style */
    --dhcs-font-chart-caption-style: italic;
    /* chart-caption non-italic variant (e.g. county-totals disclaimer footnote) */
    --dhcs-font-chart-caption-upright-style: normal;

    /* Overview — Medi-Cal managed care plan name (Figma Title/H3 Large, not a heading) */
    --dhcs-font-overview-managed-care-plan-name-size: 18px;
    --dhcs-font-overview-managed-care-plan-name-weight: 700;
    --dhcs-font-overview-managed-care-plan-name-line-height: 26px;

    /* Integrated Plan submission-status banner — info icon box (matches Figma 24px) */
    --dhcs-font-inline-informational-icon-size: 24px;

    /* Compare bar-chart series colors — two-series breakdown on Compare page. */
    --dhcs-color-compare-series-a: #17315A;
    --dhcs-color-compare-series-b: #FAB033;
}

/* ApexCharts custom tooltip — county-only pill rendered by apex-bar-chart.js
   on hover/focus for multi-series Compare breakdown charts. */
.apex-bar-tooltip-pill {
    background: #1A1F2A;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 4px 12px;
    font-family: var(--dhcs-font-family-default);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}