/* ============================================================
   DISHA App Typography System v1.0 - shared type-scale tokens
   Source: DISHA_App_Typography_System.pdf (App-wide Typography System)

   Phase 1 (done separately, per-page): product typeface switched to
   Manrope, with Inter as the technical fallback.

   Phase 2 (this file): the spec's 13 semantic size/line-height/weight
   tokens, defined as CSS custom properties plus matching utility
   classes. Purely additive - nothing here changes how any existing
   element looks, since nothing in the app references these classes
   yet. That migration is Phase 3, done screen-by-screen.

   Usage once migrating a screen:
     <h1 class="dh-heading-xl">Career assessment</h1>
     <p class="dh-body-md">Understand your strengths and interests.</p>

   Where the spec gives a weight range (e.g. label-md 600-700), the
   base token/class uses the lighter (inactive/default) weight; apply
   .dh-weight-700 (or the component's own .active-style rule) for the
   heavier state called for in the spec's Navigation table.
   ============================================================ */

:root {
    --type-display-lg-size: 32px; --type-display-lg-line: 40px; --type-display-lg-weight: 800;
    --type-display-md-size: 28px; --type-display-md-line: 36px; --type-display-md-weight: 800;

    --type-heading-xl-size: 24px; --type-heading-xl-line: 32px; --type-heading-xl-weight: 800;
    --type-heading-lg-size: 20px; --type-heading-lg-line: 28px; --type-heading-lg-weight: 800;
    --type-heading-md-size: 18px; --type-heading-md-line: 24px; --type-heading-md-weight: 700;
    --type-heading-sm-size: 16px; --type-heading-sm-line: 22px; --type-heading-sm-weight: 700;

    --type-body-lg-size: 15px; --type-body-lg-line: 24px; --type-body-lg-weight: 500;
    --type-body-md-size: 14px; --type-body-md-line: 21px; --type-body-md-weight: 500;
    --type-body-sm-size: 13px; --type-body-sm-line: 19px; --type-body-sm-weight: 500;

    --type-label-lg-size: 14px; --type-label-lg-line: 20px; --type-label-lg-weight: 700;
    --type-label-md-size: 12px; --type-label-md-line: 16px; --type-label-md-weight: 600;

    --type-caption-size: 11px; --type-caption-line: 16px; --type-caption-weight: 500;
    --type-micro-size: 10px;   --type-micro-line: 14px;   --type-micro-weight: 600;
}

.dh-display-lg  { font-size: var(--type-display-lg-size);  line-height: var(--type-display-lg-line);  font-weight: var(--type-display-lg-weight); }
.dh-display-md  { font-size: var(--type-display-md-size);  line-height: var(--type-display-md-line);  font-weight: var(--type-display-md-weight); }

.dh-heading-xl  { font-size: var(--type-heading-xl-size);  line-height: var(--type-heading-xl-line);  font-weight: var(--type-heading-xl-weight); }
.dh-heading-lg  { font-size: var(--type-heading-lg-size);  line-height: var(--type-heading-lg-line);  font-weight: var(--type-heading-lg-weight); }
.dh-heading-md  { font-size: var(--type-heading-md-size);  line-height: var(--type-heading-md-line);  font-weight: var(--type-heading-md-weight); }
.dh-heading-sm  { font-size: var(--type-heading-sm-size);  line-height: var(--type-heading-sm-line);  font-weight: var(--type-heading-sm-weight); }

.dh-body-lg     { font-size: var(--type-body-lg-size);     line-height: var(--type-body-lg-line);     font-weight: var(--type-body-lg-weight); }
.dh-body-md     { font-size: var(--type-body-md-size);     line-height: var(--type-body-md-line);     font-weight: var(--type-body-md-weight); }
.dh-body-sm     { font-size: var(--type-body-sm-size);     line-height: var(--type-body-sm-line);     font-weight: var(--type-body-sm-weight); }

.dh-label-lg    { font-size: var(--type-label-lg-size);    line-height: var(--type-label-lg-line);    font-weight: var(--type-label-lg-weight); }
.dh-label-md    { font-size: var(--type-label-md-size);    line-height: var(--type-label-md-line);    font-weight: var(--type-label-md-weight); }

.dh-caption     { font-size: var(--type-caption-size);     line-height: var(--type-caption-line);     font-weight: var(--type-caption-weight); }
.dh-micro       { font-size: var(--type-micro-size);       line-height: var(--type-micro-line);       font-weight: var(--type-micro-weight); }

/* Weight-only modifiers, for the active/emphasis state of a token
   that has a weight range in the spec (label-md, caption, micro,
   heading-lg) without changing its size. */
.dh-weight-500 { font-weight: 500; }
.dh-weight-600 { font-weight: 600; }
.dh-weight-700 { font-weight: 700; }
.dh-weight-800 { font-weight: 800; }