/**
 * Typography System
 * Establishes consistent heading hierarchy and text styles
 *
 * Uses design tokens from design-tokens.css
 * @version 1.0.0
 */

/* ==========================================================================
   Heading Hierarchy
   Clear visual distinction between heading levels
   ========================================================================== */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin: 0 0 0.5em;
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-gray-900, #0f172a);
}

/* H1 - Page titles, major sections */
h1,
.h1 {
  font-size: var(--text-3xl); /* 30px */
  font-weight: var(--font-bold);
  letter-spacing: -0.025em;
}

/* H2 - Section headers */
h2,
.h2 {
  font-size: var(--text-2xl); /* 24px */
  font-weight: var(--font-semibold);
  letter-spacing: -0.02em;
}

/* H3 - Subsection headers, card titles */
h3,
.h3 {
  font-size: var(--text-xl); /* 20px */
  font-weight: var(--font-semibold);
}

/* H4 - Component headers, form section titles */
h4,
.h4 {
  font-size: var(--text-lg); /* 18px */
  font-weight: var(--font-medium);
}

/* H5 - Minor headers, labels */
h5,
.h5 {
  font-size: var(--text-base); /* 16px */
  font-weight: var(--font-medium);
}

/* H6 - Smallest headers, captions */
h6,
.h6 {
  font-size: var(--text-sm); /* 14px */
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500, #64748b);
}

/* ==========================================================================
   Text Styles
   ========================================================================== */

/* Lead/intro text */
.text-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600, #475569);
}

/* Body text variants */
.text-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

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

/* Caption/helper text */
.text-caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-gray-500, #64748b);
}

/* Label text */
.text-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700, #334155);
}

/* Overline text (small caps above headings) */
.text-overline {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-500, #64748b);
}

/* ==========================================================================
   Text Colors
   ========================================================================== */

.text-primary {
  color: var(--color-gray-900, #0f172a);
}
.text-secondary {
  color: var(--color-gray-600, #475569);
}
.text-muted {
  color: var(--color-gray-500, #64748b);
}
.text-light {
  color: var(--color-gray-400, #94a3b8);
}

.text-success {
  color: var(--color-success, #22c55e);
}
.text-warning {
  color: var(--color-warning, #f59e0b);
}
.text-error {
  color: var(--color-error, #ef4444);
}
.text-info {
  color: var(--color-info, #c8402a);
}

/* Brand colors */
.text-brand {
  color: var(--app-primary, #0f766e);
}
.text-brand-admin {
  color: var(--admin-brand-primary, #c8402a);
}

/* ==========================================================================
   Text Alignment
   ========================================================================== */

.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* ==========================================================================
   Font Weights
   ========================================================================== */

.font-normal {
  font-weight: var(--font-normal);
}
.font-medium {
  font-weight: var(--font-medium);
}
.font-semibold {
  font-weight: var(--font-semibold);
}
.font-bold {
  font-weight: var(--font-bold);
}

/* ==========================================================================
   Text Decoration
   ========================================================================== */

.underline {
  text-decoration: underline;
}
.no-underline {
  text-decoration: none;
}
.line-through {
  text-decoration: line-through;
}

/* ==========================================================================
   Text Transform
   ========================================================================== */

.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}

/* ==========================================================================
   Prose (Long-form content)
   ========================================================================== */

.prose {
  max-width: 65ch;
  line-height: var(--leading-relaxed);
}

.prose p {
  margin-bottom: 1em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose ul,
.prose ol {
  margin: 1em 0;
  padding-left: 1.5em;
}

.prose li {
  margin-bottom: 0.5em;
}

.prose a {
  color: var(--app-primary, #0f766e);
  text-decoration: underline;
}

.prose a:hover {
  color: var(--app-primary-hover, #0d6560);
}

/* ==========================================================================
   Monospace / Code
   ========================================================================== */

code,
kbd,
samp,
pre,
.font-mono {
  font-family: var(--font-mono);
}

code {
  font-size: 0.875em;
  padding: 0.125em 0.375em;
  background: var(--color-gray-100, #f1f5f9);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-gray-800, #1e293b);
}

pre {
  font-size: var(--text-sm);
  padding: 1rem;
  background: var(--color-gray-900, #0f172a);
  border-radius: var(--radius-md, 8px);
  color: var(--color-gray-100, #f1f5f9);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

/* ==========================================================================
   Truncation
   ========================================================================== */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Responsive Typography
   ========================================================================== */

@media (max-width: 768px) {
  h1,
  .h1 {
    font-size: var(--text-2xl); /* Scale down on mobile */
  }

  h2,
  .h2 {
    font-size: var(--text-xl);
  }

  h3,
  .h3 {
    font-size: var(--text-lg);
  }
}

/* ==========================================================================
   BART system tier — rendering, controls, figures, browser surfaces
   2026-08-16

   Deliberately additive. The existing heading sizes above are left alone:
   retrofitting the new --ts-* scale across 34k lines of styles.css would
   reflow dense tables, and density is a hard constraint on this pass. --ts-*
   is the vocabulary for surfaces that get rebuilt, not a global resize.
   ========================================================================== */

/* ---- Form controls inherit the typeface ----------------------------------
   THE Arial fix. Chrome's UA stylesheet sets `font: 400 13.333px Arial` on
   button/input/select/textarea, and font-family is NOT inherited by form
   controls. Any control the app never explicitly styled therefore rendered
   Arial — measured at 42 of 149 visible elements, including the Proposal
   Desk's primary CTA. ui-consistency.css found this on 2026-08-07 and fixed
   it for two ReportUIv2 selectors; this generalises that fix.

   Longhands, not the `font` shorthand: the shorthand would also reset
   line-height to the parent's, collapsing control heights across the app. */
button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
}

/* Buttons opt into the medium cut — they are labels, not body copy. */
button {
  font-weight: var(--fw-medium, 500);
}

/* ---- Rendering ----------------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Inter's optical size axis, now that the variable font actually loads.
     font-synthesis-weight:none forbids the browser faking a bold it does not
     have — with 100..900 real, a smeared synthetic weight is only ever a bug. */
  font-optical-sizing: auto;
  font-synthesis-weight: none;
}

/* ---- Figures ------------------------------------------------------------
   This product is a rate table with an app around it. Proportional figures
   make a dollar column impossible to scan because glyph advances differ per
   digit; tabular figures lock every digit to one width so decimals align down
   the column without manual padding. Slashed zero disambiguates 0/O in plan
   codes and carrier IDs.

   Scoped to elements that actually carry numbers, so prose keeps its
   proportional figures. */
td,
th,
input[type='number'],
input[inputmode='numeric'],
input[inputmode='decimal'],
.ledger-num,
[data-numeric],
.tabular,
.money,
.rate,
.premium,
output,
time,
code,
kbd,
samp,
pre {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ---- Browser surfaces ---------------------------------------------------
   Selection, caret, scrollbars and focus rings ship with UA defaults that
   belong to no design system. Theming them is the cheapest evidence that a
   surface was built rather than assembled. */
::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: inherit;
}

html {
  caret-color: var(--accent);
  accent-color: var(--accent);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, currentColor 22%, transparent) transparent;
}

/* WebKit scrollbars: a thumb on a transparent track, so the scrollbar reads as
   part of the surface rather than system chrome pasted over it. currentColor
   means one rule works on both the light workspace and the navy chrome. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, currentColor 20%, transparent);
  border: 2px solid transparent;
  border-radius: var(--r-pill, 9999px);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, currentColor 34%, transparent);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---- Focus --------------------------------------------------------------
   One ring, in the accent, offset so it reads on both grounds. :focus-visible
   only — pointer users never see it, which is exactly what allows the ring to
   be genuinely prominent for keyboard users instead of apologetically faint. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Links --------------------------------------------------------------
   Underlines clear the descenders and thicken on hover rather than appearing
   from nothing. */
a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

a:hover {
  text-decoration-thickness: 0.09em;
}

/* ---- Wrapping -----------------------------------------------------------
   Stops the one-word orphan line on a wrapped title. */
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}