/* ==========================================================
   CDS Journey — Redesign typography (Student Portal namespace)
   Semantic classes only; all values come from redesign/css/tokens.css
   (--rd-* namespace). Load this file after tokens.css.

   Hierarchy:
     editorial serif (Fraunces)  -> major/section headings
     sans-serif (Inter)          -> nav, body, controls, buttons
     small uppercase (Inter)     -> eyebrows/status/category labels
     mono (IBM Plex Mono)        -> technical/meta/stat labels

   MOBILE-FIRST: base rules below are the mobile sizes. Larger
   viewports are reached only via min-width media queries — never
   max-width. Redesign breakpoint scale (namespace-local; the
   existing production system's own 767px/1199px breakpoints are
   untouched and unrelated) — see tokens.css's own breakpoint
   reference comment for the full canonical 5-tier scale.

   Design-system-lock: .rd-display-xl (H1), .rd-display-lg (H2) and
   .rd-heading-xl (H3) are responsive, but the stepping now lives in
   their tokens (tokens.css's @media blocks), not here — this file
   just reads var(--rd-text-display-xl) etc. unconditionally, so the
   breakpoint logic exists in exactly one place. .rd-heading-md (H4),
   .rd-body-lg, .rd-body, .rd-body-sm and .rd-caption are fixed at
   every tier per the locked scale. .rd-heading-lg (an extra level
   outside the locked 4-level scale, already in use — see its own
   comment below) is the one class that still steps directly, in the
   media query at the bottom of this file. Label/eyebrow/meta/mono
   sizes are fixed at every tier by design — small, frequently-read
   UI text shouldn't reflow.
   ========================================================== */

/* ---- Editorial display / heading levels (Fraunces) ---- */

.rd-display-xl,
.rd-display-lg,
.rd-heading-xl,
.rd-heading-lg,
.rd-heading-md {
    font-family: var(--rd-font-display);
    color: var(--rd-text-heading);
    margin: 0;
    text-wrap: balance;
}

/* Hero H1. Design-system-lock: 36/42/48/56px at mobile/tablet/laptop/
   desktop -- the responsive stepping lives entirely in the
   --rd-text-display-xl(-leading) tokens (tokens.css), not here. */
.rd-display-xl {
    font-size: var(--rd-text-display-xl);
    line-height: var(--rd-text-display-xl-leading);
    letter-spacing: var(--rd-text-display-xl-tracking);
    font-weight: var(--rd-weight-semibold);
}

/* H2. 30/36/40px at mobile/tablet/laptop+ -- see tokens.css. */
.rd-display-lg {
    font-size: var(--rd-text-display-lg);
    line-height: var(--rd-text-display-lg-leading);
    letter-spacing: var(--rd-text-display-lg-tracking);
    font-weight: var(--rd-weight-semibold);
}

/* H3. 20/24px at mobile/tablet+ -- see tokens.css. */
.rd-heading-xl {
    font-size: var(--rd-text-heading-xl);
    line-height: var(--rd-text-heading-xl-leading);
    letter-spacing: var(--rd-text-heading-xl-tracking);
    font-weight: var(--rd-weight-semibold);
}

/* An in-between level the locked 4-level H1-H4 scale doesn't name --
   kept as-is (not part of the lock, not touched by it) since it's
   already in real use (student dashboard section headings) and
   doesn't conflict with any locked value. */
.rd-heading-lg {
    font-size: 20px;
    line-height: var(--rd-text-heading-lg-leading);
    letter-spacing: var(--rd-text-heading-lg-tracking);
    font-weight: var(--rd-weight-semibold);
}

/* H4. Fixed 18px/1.3/600 at every tier -- already matched the locked
   spec exactly before this phase; unchanged, just tokenized weight. */
.rd-heading-md {
    font-size: var(--rd-text-heading-md);
    line-height: var(--rd-text-heading-md-leading);
    letter-spacing: var(--rd-text-heading-md-tracking);
    font-weight: var(--rd-weight-semibold);
}

/* ---- Body copy (Inter) ---- */

.rd-body-lg,
.rd-body,
.rd-body-sm {
    font-family: var(--rd-font-body);
    color: var(--rd-text-body-color);
    margin: 0;
    font-weight: var(--rd-weight-regular);
}

/* Body Large. Design-system-lock: fixed 18px/1.6/400 at every tier
   (previously stepped 16px mobile -> 18px tablet+; the locked spec
   gives one flat value, so the step is removed). */
.rd-body-lg {
    font-size: var(--rd-text-body-lg);
    line-height: var(--rd-text-body-lg-leading);
}

.rd-body {
    font-size: var(--rd-text-body);
    line-height: var(--rd-text-body-leading);
}

.rd-body-sm {
    font-size: var(--rd-text-body-sm);
    line-height: var(--rd-text-body-sm-leading);
}

/* ---- Labels / eyebrows / meta / mono (Inter + IBM Plex Mono) ----
   Fixed size at every tier by design — small UI/meta text should not
   reflow across breakpoints. ---- */

.rd-label {
    display: inline-block;
    font-family: var(--rd-font-body);
    font-size: var(--rd-text-label);
    line-height: var(--rd-text-label-leading);
    font-weight: var(--rd-weight-semibold);
    color: var(--rd-text-muted);
}

.rd-eyebrow {
    display: inline-block;
    font-family: var(--rd-font-body);
    font-size: var(--rd-text-label);
    line-height: var(--rd-text-label-leading);
    letter-spacing: var(--rd-text-label-tracking);
    text-transform: uppercase;
    font-weight: var(--rd-weight-semibold);
    color: var(--rd-brand-secondary);
}

/* Caption. Design-system-lock: 12px/1.4/500 -- distinct from .rd-label
   (600, form/UI control labels) and .rd-eyebrow (600, uppercase,
   tracked); a plain, lighter-weight small caption for image/figure/
   card meta text didn't already exist under any name. */
.rd-caption {
    display: inline-block;
    font-family: var(--rd-font-body);
    font-size: var(--rd-text-caption);
    line-height: var(--rd-text-caption-leading);
    font-weight: var(--rd-weight-medium);
    color: var(--rd-text-muted);
}

.rd-meta {
    font-family: var(--rd-font-body);
    font-size: var(--rd-text-meta);
    line-height: var(--rd-text-meta-leading);
    font-weight: var(--rd-weight-regular);
    color: var(--rd-text-muted);
}

.rd-mono {
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-meta);
    line-height: var(--rd-text-meta-leading);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--rd-text-secondary);
}

/* ---- Hindi content override ---- */

.rd-lang-hi {
    font-family: var(--rd-font-hindi);
}

/* ---- Navigation / controls / buttons (Inter, medium weight) ---- */

.rd-nav-text {
    font-family: var(--rd-font-body);
    font-size: var(--rd-text-body-sm);
    font-weight: var(--rd-weight-medium);
    color: var(--rd-text-secondary);
}

.rd-button-text {
    font-family: var(--rd-font-body);
    font-size: var(--rd-text-body-sm);
    font-weight: var(--rd-weight-semibold);
    letter-spacing: 0.01em;
}

/* ==========================================================
   Progressive enhancement — tablet and up.
   .rd-display-xl/-lg and .rd-heading-xl no longer need a rule here --
   they read responsive tokens now (see tokens.css). .rd-heading-lg is
   the one level outside the locked scale that still steps directly.
   ========================================================== */

@media (min-width: 768px) {
    .rd-heading-lg { font-size: 22px; }
}