/* Kmusta brand v2 — app density type scale (DRAFT until Phase 1 founder sign-off)
   ============================================================================
   THIS IS THE MOBILE APP'S DAY-ONE TOKEN FILE.

   Kmusta OS gets a native app eventually. When it does, the thing most likely
   to be reinvented badly under deadline is the type scale — someone picks
   sizes that "look right on my phone" and the app quietly stops being the same
   brand as the website. This file exists so that the app's scale is a decision
   already made, reviewed, and contrast-gated, months before anyone opens Xcode.

   Where the numbers come from: the ChatGPT mockup spec seeded this file, and
   on 2026-08-27 every value was MEASURED against the reference image itself
   (Brand Foundry/reference/mockup-2026-08-26.png) rather than left on trust.
   Frames 2 and 3 of that image measure 385/387px against a 390pt iOS frame, so
   the render is ~1:1 and an image pixel is a CSS pixel; sizes below are derived
   from ink-band heights (cap-height / 0.70, or ascender-to-descender for mixed
   case runs).

   FOUR VALUES MOVED. The JSON was a plausible description of the image, not a
   reading of it, which is exactly the risk docs/09 flagged:

     page heading    27px -> 33px   (measured 23px cap on "Caramel Macchiato")
     large price     25px -> 19px   (measured 13px on the detail screen)
     price           14px -> 11px   (measured 7px on the product cards)
     wordmark        52px -> 85px   (splash lockup; measured 61px cap)

   The small end of the scale — body 13, product title 12, label 12, caption 10,
   nav 9 — measured as specified and is unchanged.

   NOT IN THE SPEC AND NOT IN THE IMAGE: uppercase tracked labels. The reference
   sets every section label in SENTENCE CASE ("Milk Options", "Sweetness Level",
   "Categories", "Size"). An earlier pass through the order page set them in
   caps with wide tracking; that was invented, and it is the single biggest
   reason that page read as a different design from the reference.

   This is a MOBILE scale. typography.css keeps the larger web scale. Same
   fonts, same ratios, two densities.

   Use this file on: the native app, the OS mockup (erp/mockup/kmusta-os.html),
   and the cart's phone-first surfaces (order, console) where the compact scale
   genuinely reads better than the web one.
   Do NOT use it on: the marketing site. 13px body on a desktop page is the
   text-heavy feeling the founder asked us to fix, not the fix.

   Fonts are inherited from fonts.css / typography.css — Fraunces (serif) and
   Plus Jakarta Sans (sans) are unchanged in v2. Only the SIZES change here.

   NOT LINKED BY ANY PAGE YET (Phase 0 is draft-only).
   ============================================================================ */
:root {
  /* ---- Wordmark --------------------------------------------------------- */
  --dtype-wordmark-size:     85px; /* measured (splash lockup) */
  --dtype-wordmark-weight:   500;
  --dtype-wordmark-lh:       1.0;
  --dtype-wordmark-family:   var(--font-display);

  --dtype-wordmark-tag-size:   10px;
  --dtype-wordmark-tag-weight: 600;
  --dtype-wordmark-tag-track:  3px;   /* the wide tracking IS the lockup */
  --dtype-wordmark-tag-lh:     1.2;

  /* ---- Headings (serif) ------------------------------------------------- */
  --dtype-page-size:      33px;   /* measured */
  --dtype-page-weight:    500;
  --dtype-page-track:     -0.3px;
  --dtype-page-lh:        1.15;

  --dtype-card-title-size:   20px;
  --dtype-card-title-weight: 500;
  --dtype-card-title-track:  -0.2px;
  --dtype-card-title-lh:     1.15;

  --dtype-price-lg-size:   19px;  /* measured */
  --dtype-price-lg-weight: 500;
  --dtype-price-lg-track:  -0.3px;
  --dtype-price-lg-lh:     1.1;

  /* ---- Body and UI (sans) ----------------------------------------------- */
  --dtype-section-size:   14px;   /* section title — bold, not big, and
                                     SENTENCE CASE. Not uppercase, not
                                     tracked. Measured from the reference. */
  --dtype-section-weight: 700;
  --dtype-section-lh:     1.3;

  --dtype-body-size:      13px;
  --dtype-body-weight:    400;
  --dtype-body-lh:        1.5;

  --dtype-greeting-size:   14px;
  --dtype-greeting-weight: 400;
  --dtype-greeting-lh:     1.4;

  --dtype-product-size:   12px;
  --dtype-product-weight: 600;
  --dtype-product-lh:     1.3;

  --dtype-price-size:     11px;   /* measured */
  --dtype-price-weight:   700;
  --dtype-price-lh:       1.3;

  --dtype-label-size:     12px;
  --dtype-label-weight:   600;
  --dtype-label-lh:       1.3;

  --dtype-button-size:    12px;
  --dtype-button-weight:  700;
  --dtype-button-lh:      1.2;

  --dtype-caption-size:   10px;
  --dtype-caption-weight: 400;
  --dtype-caption-lh:     1.3;

  --dtype-nav-size:       9px;
  --dtype-nav-weight:     600;
  --dtype-nav-lh:         1.2;
}

/* ---------------------------------------------------------------------------
   Accessibility floors — read this before using the small end of the scale.

   9px, 10px and 12px are legitimate at phone viewing distance for LABELS:
   nav destinations, captions, chip text, button text. They are not legitimate
   for anything a user has to READ — no sentence, no error message, no policy
   text, no address may be set below --dtype-body-size.

   Two hard rules that the contrast gate cannot enforce for us:

   1. Nothing below --dtype-body-size (13px) may use --color-ink-muted. Muted
      text clears only the 3.0 non-text bar, which assumes large text or a UI
      element. Small AND muted is the one combination that is always wrong.

   2. Never set these sizes in px in a context that disables user zoom. The px
      values here are the DESIGN INTENT at a 1.0 scale factor; a surface that
      respects OS text-size settings (which the native app must) should carry
      them through its own scaling, not pin them.
   --------------------------------------------------------------------------- */