/* ============================================================================
   Dental Deals — Mobile Typography System
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for size / weight / line-height / tracking, shared by
   BOTH stylesheet bundles:
     - the Tailwind app build  (@import-ed into tailwind/application.css), and
     - the Propshaft marketing / explore / onboarding pages
       (stylesheet_link_tag "typography" — those pages never load the Tailwind
       build, so this is how they get the scale).

   rem-based off a 16px root (1rem = 16px). The native OS font-scale is applied
   by `html.hotwire-native { zoom }` (see application/_head), so this fixed rem
   scale rides that zoom uniformly — do NOT reintroduce per-element scaling.

   Text does not get a size. It gets a ROLE. ~12 roles, 4 weights. Components
   reference `--type-*` (or a `.t-*` class), never a raw px. Full spec:
   docs/mobile-typography-system.md.

   The raw `--text-*` steps are ALSO declared in tailwind/application.css @theme
   so the `text-*` utilities regenerate at the compact sizes; the copy here is
   what feeds component `var(--text-*)` lookups and the marketing bundle.
   ============================================================================ */

:root {
  /* -- 1. RAW STEP SCALE (rem @ 16px root; px reference in comments) -------- */
  --text-2xs:  0.625rem;   /* 10px — non-text / micro glyph FLOOR (avatars, dots) */
  --text-xs:   0.6875rem;  /* 11px — caption, overline, table header */
  --text-sm:   0.75rem;    /* 12px — secondary / helper / label / chip */
  --text-base: 0.8125rem;  /* 13px — BODY ANCHOR (paragraphs, table cell, list) */
  --text-md:   0.875rem;   /* 14px — callout / input text / comfortable reading */
  --text-lg:   0.9375rem;  /* 15px — card title, form-section title, list-row title */
  --text-xl:   1.125rem;   /* 18px — section header, slideover title */
  --text-2xl:  1.375rem;   /* 22px — page/hero title, listing price, stat number */
  --text-3xl:  1.875rem;   /* 30px — display / big KPI number */
  --text-4xl:  3rem;       /* 48px — hero display (valuation VALUE, marketing hero) */

  /* -- 2. PRIMITIVES ------------------------------------------------------- */
  /* Weights — FOUR only. Kill 300 / 750 / 800 / the `bold` keyword. */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line-heights — unitless, tokenized. */
  --lh-flat:     1;     /* big numbers / single-line stats */
  --lh-tight:    1.1;   /* display */
  --lh-snug:     1.25;  /* titles */
  --lh-heading:  1.35;  /* card / list titles, multi-line headings */
  --lh-body:     1.5;   /* body + secondary reading text */

  /* Tracking — tokenized. */
  --tk-tight:   -0.02em;  /* display + titles */
  --tk-snug:    -0.01em;  /* card titles */
  --tk-normal:   0;       /* body, everything mid-scale */
  --tk-wide:     0.06em;  /* uppercase overline / eyebrow / table header */

  /* -- 3. SEMANTIC ROLE TOKENS --------------------------------------------
     `font` shorthand = weight + size/line-height. Apply with:
        font: var(--type-body) var(--font-sans);
        letter-spacing: var(--tk-XXX);
     (tracking is a sibling token — it is not part of `font`). */
  --type-display:     var(--fw-bold)     var(--text-3xl)/var(--lh-tight);
  --type-title:       var(--fw-bold)     var(--text-2xl)/var(--lh-snug);
  --type-section:     var(--fw-bold)     var(--text-xl)/var(--lh-snug);
  --type-card-title:  var(--fw-semibold) var(--text-lg)/var(--lh-heading);
  --type-callout:     var(--fw-regular)  var(--text-md)/var(--lh-body);
  --type-body:        var(--fw-regular)  var(--text-base)/var(--lh-body);
  --type-body-strong: var(--fw-semibold) var(--text-base)/var(--lh-body);
  --type-secondary:   var(--fw-regular)  var(--text-sm)/var(--lh-body);
  --type-caption:     var(--fw-regular)  var(--text-xs)/var(--lh-heading);
  --type-label:       var(--fw-medium)   var(--text-sm)/var(--lh-snug);
  --type-overline:    var(--fw-semibold) var(--text-xs)/var(--lh-snug);
  --type-stat:        var(--fw-bold)     var(--text-2xl)/var(--lh-flat);

  /* Role-specific escape hatches (documented, finite — not free px). */
  --type-stat-lg:     var(--fw-bold)     var(--text-3xl)/var(--lh-flat);  /* metric-card value, listing price */
  --type-stat-hero:   var(--fw-bold)     var(--text-4xl)/var(--lh-flat);  /* valuation VALUE cell */
}

/* ---- Element defaults (headings map onto roles) --------------------------
   Unifies the app + marketing forks: h1–h6 now resolve identically in both. */
.font-display { font: var(--type-display) var(--font-sans); letter-spacing: var(--tk-tight); }

h1, .h1 { font: var(--type-title)       var(--font-sans); letter-spacing: var(--tk-tight); }
h2, .h2 { font: var(--type-section)     var(--font-sans); letter-spacing: var(--tk-tight); }
h3, .h3 { font: var(--type-card-title)  var(--font-sans); letter-spacing: var(--tk-snug); }
h4, .h4 { font: var(--type-body-strong) var(--font-sans); }
h5, .h5 { font: var(--type-label)       var(--font-sans); }
h6, .h6 { font-weight: var(--fw-semibold); }

/* Body default lives in each bundle's base:
   app -> tailwind/components/base.css; marketing -> marketing/colors_and_type.css. */

/* ---- Role utility classes (the lookup vocabulary) ------------------------ */
.t-display     { font: var(--type-display)     var(--font-sans); letter-spacing: var(--tk-tight); }
.t-title       { font: var(--type-title)       var(--font-sans); letter-spacing: var(--tk-tight); }
.t-section     { font: var(--type-section)     var(--font-sans); letter-spacing: var(--tk-tight); }
.t-card-title  { font: var(--type-card-title)  var(--font-sans); letter-spacing: var(--tk-snug); }
.t-callout     { font: var(--type-callout)     var(--font-sans); }
.t-body        { font: var(--type-body)        var(--font-sans); }
.t-body-strong { font: var(--type-body-strong) var(--font-sans); }
.t-secondary   { font: var(--type-secondary)   var(--font-sans); }
.t-caption     { font: var(--type-caption)     var(--font-sans); }
.t-label       { font: var(--type-label)       var(--font-sans); }

/* Overline / eyebrow — uppercase + wide tracking baked in. `.section-label`
   is kept as an alias so existing markup keeps working. */
.t-overline,
.section-label {
  font: var(--type-overline) var(--font-sans);
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
  color: var(--base-text-tertiary);
}

/* Numbers — tabular figures so columns of stats align. */
.t-stat,
.t-stat-lg,
.t-stat-hero {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tk-tight);
}
.t-stat      { font: var(--type-stat)      var(--font-sans); }
.t-stat-lg   { font: var(--type-stat-lg)   var(--font-sans); }
.t-stat-hero { font: var(--type-stat-hero) var(--font-sans); }

/* ---- Preserved helpers ---------------------------------------------------- */
.text-muted { color: var(--text-muted); }

.with-border {
  border-color: var(--divider-color);
  border-bottom-width: 1px;
  border-bottom-style: var(--tw-border-style);
  margin-block: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 2);
}

.link {
  color: var(--text-primary);
  text-decoration-line: underline;
  &:hover,
  &:focus { color: var(--text-primary-hover); }
}

code {
  font: var(--type-secondary) var(--font-mono);
  background: var(--bg-disabled);
  border-radius: var(--radius-md);
  color: var(--base-text);
  padding-inline: calc(var(--spacing) * 1.5);
  white-space: nowrap;
}
pre code { display: block; padding: 0.5rem 0.75rem; white-space: pre-wrap; }
kbd { font: var(--type-caption) var(--font-mono); }

/* Feature section-labels (.brokering-listing-section-label, etc.) need the dark
   tertiary anchor (carried from #164; the base .section-label already flips). */
.dark [class$="-section-label"] { color: var(--base-text-tertiary); }