/* ============================================================================
   Portmasters Visual System v2 — PRODUCT TYPE RAMP (tokens-type.css)
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   The 2026-08-01 type/spacing audit (docs/2026-08-01-type-spacing-audit.md)
   found that NONE of the 14 named Figma text styles existed anywhere in the
   token layer: tokens.css and tokens-semantic.css carry only the MARKETING /
   landing ramp (--body-font-size 17px, --btn-size 15.5px, --nav-brand-size
   17.5px …), and several of those were leaking into product components. Every
   product font-size in components/ was therefore a hardcoded literal with
   nothing behind it, and four ramp sizes (13.5 / 11.5 / 12.5 / 8.8) never
   appeared once in 1,650 measured elements.

   PROVENANCE — the 14 styles below are the Figma file's OWN text styles, given
   verbatim on the fix card (2026-08-01). Nothing here is interpolated,
   averaged or invented. Percentages convert to `em` 1:1 (Figma tracking is a
   percentage of the type size, which is exactly what `em` means for
   letter-spacing) and percentage line-heights convert to unitless multipliers.

     style              size    weight  tracking   line-height
     display/hero       30px    700     -2.2%      115%
     title/section      20px    700     -2.0%      120%
     title/container    16px    700     -1.2%      120%
     title/card         13.5px  500     -0.6%      115%
     body/default       13.5px  400     -0.4%      145%
     body/strong        13.5px  500     -0.4%      145%
     meta/default       11px    400      0.0%      140%
     meta/strong        11px    600      0.0%      140%
     numeral/count      11.5px  600     -0.9%      100%
     numeral/figure     17px    700     -2.0%      100%
     label/micro        8.8px   700    +13.0%      100%
     control/button     12.5px  700     -0.8%      120%
     control/field      13px    400     -0.4%      130%
     label/status       10px    700     +9.0%      100%

   THE TRACKING RULE (the thing a global letter-spacing gets wrong): tracking is
   SIZE-SPECIFIC. It is negative and tightens as the size grows (-2.2% at 30px
   down to -0.4% at 13.5px) and turns POSITIVE on the smallest label sizes
   (+9% at 10px, +13% at 8.8px). A component that sets one letter-spacing for
   every size is wrong by construction — pull the style's own token.

   WEIGHTS ARE REAL FILES ONLY. Inter is served at 400/500/600/700
   (.storybook/preview-head.html @font-face; confirmed live via document.fonts).
   The ramp uses only those four. Weight 300 — which the old body ramp asked
   for on 22 components — has NO file and was being synthesised by the browser.
   That was the "wrong font" the founder saw. Do not reintroduce it.

   LOAD ORDER: this file is additive and independent — it defines only NEW
   custom properties in the --type-* namespace and repoints nothing. Load it
   alongside tokens.css + tokens-semantic.css (globally in
   .storybook/preview.js, and per-file via @import in every component that
   consumes a --type-* token so components/<c>/matrix.html spec sheets keep
   resolving standalone).

   RELATIONSHIP TO THE MARKETING RAMP (two-voice rule, G0-4): the marketing
   tokens in tokens.css (--h1-size, --btn-size, --nav-brand-size, --lead-size,
   --eyebrow-size …) are NOT touched and NOT replaced. They stay the landing
   voice. This file is the PRODUCT voice. A product component that reads a
   marketing type token is a leak, not a choice.
   ============================================================================ */

:root {

  /* ==========================================================================
     display/hero — Inter Bold 30px / -2.2% / 115%
     The product ramp CEILING. Page-level hero numbers and result panels.
     ========================================================================== */
  --type-display-hero-size:     30px;
  --type-display-hero-weight:   700;
  --type-display-hero-tracking: -0.022em;
  --type-display-hero-leading:  1.15;

  /* ==========================================================================
     title/section — Inter Bold 20px / -2% / 120%
     Page and section titles inside the product frame.
     ========================================================================== */
  --type-title-section-size:     20px;
  --type-title-section-weight:   700;
  --type-title-section-tracking: -0.02em;
  --type-title-section-leading:  1.2;

  /* ==========================================================================
     title/container — Inter Bold 16px / -1.2% / 120%
     Panel / card-container headers, the sidebar wordmark.
     ========================================================================== */
  --type-title-container-size:     16px;
  --type-title-container-weight:   700;
  --type-title-container-tracking: -0.012em;
  --type-title-container-leading:  1.2;

  /* ==========================================================================
     title/card — Inter Medium 13.5px / -0.6% / 115%
     The title line INSIDE a card / list row / tile.
     ========================================================================== */
  --type-title-card-size:     13.5px;
  --type-title-card-weight:   500;
  --type-title-card-tracking: -0.006em;
  --type-title-card-leading:  1.15;

  /* ==========================================================================
     body/default — Inter Regular 13.5px / -0.4% / 145%
     THE body size. Paragraphs, table cells, descriptions, helper copy.
     ========================================================================== */
  --type-body-default-size:     13.5px;
  --type-body-default-weight:   400;
  --type-body-default-tracking: -0.004em;
  --type-body-default-leading:  1.45;

  /* ==========================================================================
     body/strong — Inter Medium 13.5px / -0.4% / 145%
     Emphasised body: nav row labels, values, the strong half of a pair.
     ========================================================================== */
  --type-body-strong-size:     13.5px;
  --type-body-strong-weight:   500;
  --type-body-strong-tracking: -0.004em;
  --type-body-strong-leading:  1.45;

  /* ==========================================================================
     meta/default — Inter Regular 11px / 0% / 140%
     Timestamps, captions, secondary meta. Tracking is ZERO here, not negative.
     ========================================================================== */
  --type-meta-default-size:     11px;
  --type-meta-default-weight:   400;
  --type-meta-default-tracking: 0;
  --type-meta-default-leading:  1.4;

  /* ==========================================================================
     meta/strong — Inter Semi Bold 11px / 0% / 140%
     Meta LABELS (the key half of key/value), small emphasised meta.
     ========================================================================== */
  --type-meta-strong-size:     11px;
  --type-meta-strong-weight:   600;
  --type-meta-strong-tracking: 0;
  --type-meta-strong-leading:  1.4;

  /* ==========================================================================
     numeral/count — Inter Semi Bold 11.5px / -0.9% / 100%
     Counts and badge numbers. line-height 100% so the digit box is the box.
     ========================================================================== */
  --type-numeral-count-size:     11.5px;
  --type-numeral-count-weight:   600;
  --type-numeral-count-tracking: -0.009em;
  --type-numeral-count-leading:  1;

  /* ==========================================================================
     numeral/figure — Inter Bold 17px / -2% / 100%
     The big KPI figure (stat tiles, price amounts).
     ========================================================================== */
  --type-numeral-figure-size:     17px;
  --type-numeral-figure-weight:   700;
  --type-numeral-figure-tracking: -0.02em;
  --type-numeral-figure-leading:  1;

  /* ==========================================================================
     label/micro — Inter Bold 8.8px / +13% / 100%
     The smallest tracked micro-label. POSITIVE tracking — opening the letters
     is what keeps 8.8px legible.
     ========================================================================== */
  --type-label-micro-size:     8.8px;
  --type-label-micro-weight:   700;
  --type-label-micro-tracking: 0.13em;
  --type-label-micro-leading:  1;

  /* ==========================================================================
     control/button — Inter Bold 12.5px / -0.8% / 120%
     Button and control labels.
     ========================================================================== */
  --type-control-button-size:     12.5px;
  --type-control-button-weight:   700;
  --type-control-button-tracking: -0.008em;
  --type-control-button-leading:  1.2;

  /* ==========================================================================
     control/field — Inter Regular 13px / -0.4% / 130%
     Field VALUES: input text, select values, textarea, option rows.
     ========================================================================== */
  --type-control-field-size:     13px;
  --type-control-field-weight:   400;
  --type-control-field-tracking: -0.004em;
  --type-control-field-leading:  1.3;

  /* ==========================================================================
     label/status — Inter Bold 10px / +9% / 100%
     Status words and status-shaped chips. POSITIVE tracking.
     ========================================================================== */
  --type-label-status-size:     10px;
  --type-label-status-weight:   700;
  --type-label-status-tracking: 0.09em;
  --type-label-status-leading:  1;

}

/* ============================================================================
   RTL — TRACKING IS ZEROED FOR THE ARABIC FACE (added 2026-08-01)
   ----------------------------------------------------------------------------
   Under dir="rtl" the <body> swaps to --font-arabic (IBM Plex Sans Arabic).
   Letter-spacing on Arabic breaks the joined letterforms, so tracking must be 0 —
   the POSITIVE values (label/micro +13%, label/status +9%) pull the joins apart
   even more visibly than the negative ones do.

   The guard belongs HERE, on the tokens, not on the classes. typography.css had a
   per-class [dir="rtl"] list, but it can only cover the .pm-text-* / .pm-type-*
   primitive; the 2026-08-01 fix wave moved 57 component files onto the tokens
   DIRECTLY (`letter-spacing: var(--type-body-default-tracking)` on
   .pm-shell__item, .pm-table__td, .pm-noti-row__title …), and none of those are
   in the class list. Measured on the --rtl stories before this block: 132 of 220
   rendered Arabic text elements still carried Latin tracking.

   Redefining the tokens inside a dir="rtl" subtree fixes every consumer at once —
   the primitive, the 57 component files, and anything written later — because
   custom properties inherit. This is only possible BECAUSE the ramp is tokenised;
   it is the payoff of task A. Sizes / weights / leadings are untouched: it is the
   TRACKING that is script-specific, not the type scale.
   ============================================================================ */
[dir="rtl"] {
  --type-display-hero-tracking:   0;
  --type-title-section-tracking:  0;
  --type-title-container-tracking:0;
  --type-title-card-tracking:     0;
  --type-body-default-tracking:   0;
  --type-body-strong-tracking:    0;
  --type-meta-default-tracking:   0;   /* already 0 — restated so the block is the complete list */
  --type-meta-strong-tracking:    0;   /* already 0 — restated so the block is the complete list */
  --type-numeral-count-tracking:  0;
  --type-numeral-figure-tracking: 0;
  --type-label-micro-tracking:    0;   /* was +13% — positive tracking is the worst case for Arabic joins */
  --type-control-button-tracking: 0;
  --type-control-field-tracking:  0;
  --type-label-status-tracking:   0;   /* was +9% */
}