/* ============================================================================
   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 */
  --lh-relaxed:  1.65;  /* dialog + empty-state prose (broker workspace) */

  /* 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 */
  /* Broker workspace redesign — three tighter/wider rungs the ramp lacked. */
  --tk-panel:   -0.015em; /* panel + dialog titles, card money anchor */
  --tk-micro:   -0.005em; /* switcher tabs */
  --tk-th:       0.02em;  /* table header, tab count */
  --tk-eyebrow:  0.12em;  /* workspace uppercase eyebrow (wider than --tk-wide) */

  /* -- 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 */

  /* -- 4. BROKER WORKSPACE ROLES (dual-pipeline redesign) ------------------
     The Claude Design handoff specifies half-pixel steps — 11.5 / 12.5 / 13.5 /
     14.5px — and says to reproduce them: they are what give the dense board and
     table regions their calm. Our main ramp lands exactly 0.5px BELOW each of
     them, so these cannot just snap to it.

     The sizes are inlined here instead of becoming new --text-* steps on purpose.
     The raw ramp is ALSO declared in application.css @theme, so widening it would
     regenerate every `text-*` utility app-wide and shift the marketing bundle
     too — a global change to serve one surface. Custom-property definitions are
     exempt from `typography:check` by construction (it only matches font-size /
     font-weight / font: declarations), and workspace components consume ONLY
     these roles, never a raw px.

     Display roles take var(--font-display) (Plus Jakarta Sans); everything else
     takes var(--font-sans), which is already Inter — the handoff's body family.
     Source: design_handoff_dual_pipeline/06-design-tokens.md. */

  /* Display family — headings, titles, card titles, money anchors. */
  --type-ws-page-title:   var(--fw-bold)     1.625rem/var(--lh-tight);    /* 26px, sidebar variant h1 */
  --type-ws-empty-title:  var(--fw-bold)     1.4375rem/var(--lh-snug);    /* 23px */
  --type-ws-panel-title:  var(--fw-bold)     1.375rem/var(--lh-snug);     /* 22px */
  --type-ws-dialog-title: var(--fw-bold)     1.3125rem/var(--lh-snug);    /* 21px */
  --type-ws-money:        var(--fw-bold)     1.0625rem/var(--lh-flat);    /* 17px, card anchor */
  --type-ws-money-sm:     var(--fw-bold)     0.9375rem/var(--lh-flat);    /* 15px, panel value */
  --type-ws-rail-title:   var(--fw-semibold) 0.9375rem/var(--lh-snug);    /* 15px, sidebar item */
  --type-ws-tab:          var(--fw-semibold) 0.90625rem/var(--lh-snug);   /* 14.5px, switcher tab */
  --type-ws-card-title:   var(--fw-semibold) 0.875rem/var(--lh-heading);  /* 14px */
  --type-ws-col-title:    var(--fw-semibold) 0.84375rem/var(--lh-snug);   /* 13.5px */

  /* Body family. */
  --type-ws-empty-body:   var(--fw-regular)  0.9375rem/var(--lh-relaxed); /* 15px */
  --type-ws-dialog-body:  var(--fw-regular)  0.90625rem/1.6;              /* 14.5px */
  --type-ws-input:        var(--fw-regular)  0.875rem/var(--lh-body);     /* 14px, dialog input */
  --type-ws-body:         var(--fw-regular)  0.84375rem/var(--lh-body);   /* 13.5px, table cell, panel field */
  --type-ws-body-strong:  var(--fw-medium)   0.84375rem/var(--lh-body);   /* 13.5px */
  --type-ws-bulk:         var(--fw-medium)   0.8125rem/var(--lh-snug);    /* 13px, bulk bar label */
  --type-ws-banner-body:  var(--fw-regular)  0.8125rem/var(--lh-body);    /* 13px */
  --type-ws-chip:         var(--fw-medium)   0.78125rem/var(--lh-snug);   /* 12.5px */
  --type-ws-chip-on:      var(--fw-semibold) 0.78125rem/var(--lh-snug);   /* 12.5px, active chip */
  --type-ws-subtitle:     var(--fw-regular)  0.78125rem/var(--lh-body);   /* 12.5px, card subtitle */
  --type-ws-meta:         var(--fw-regular)  0.75rem/var(--lh-body);      /* 12px, card meta, counts */
  --type-ws-action:       var(--fw-semibold) 0.75rem/var(--lh-snug);      /* 12px, card inline action */
  --type-ws-th:           var(--fw-semibold) 0.71875rem/var(--lh-snug);   /* 11.5px, table header, tab count */
  --type-ws-eyebrow:      var(--fw-semibold) 0.6875rem/var(--lh-snug);    /* 11px, uppercase */
  --type-ws-badge:        var(--fw-semibold) 0.6875rem/var(--lh-snug);    /* 11px, nav count badge */
  --type-ws-pill:         var(--fw-semibold) 0.625rem/var(--lh-snug);     /* 10px, "New" pill */
}

/* ---- 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); }