/* @canonical/styles-typography — the typography tokens
 *
 * The concept: the values. The names that map the design tokens' typographic
 * scale onto what the engines and the element rules read.
 *
 * It declares custom properties and styles nothing: the scale as
 * @canonical/design-tokens emits it, and the naming shims that bridge it.
 *
 * @canonical/design-tokens emits the scale as custom properties:
 *   --typography-heading-{1-6}-font-size      → e.g. var(--dimension-size-fontSize-700)
 *   --typography-heading-{1-6}-font-weight     → e.g. var(--typography-weight-medium)
 *   --typography-heading-{1-6}-line-height     → unitless DTCG projection
 *   --typography-heading-{1-6}-line-height-dimension → exact Canonical length (when available)
 *   --typography-heading-{1-6}-letter-spacing  → e.g. var(--dimension-letterSpacing-default)
 *   --typography-heading-{1-6}-font-family     → e.g. var(--typography-fontFamily-default)
 *   (same pattern for text.primary, text.secondary, text.tertiary)
 *
 * Every rule here declares custom properties on :root and nothing else, and a
 * custom property does nothing where it is declared — only where a rule reads
 * it — so importing this file adds no styling to any element. elements.css is
 * where the reading happens.
 *
 * The two are separate files because a stylesheet sometimes wants this half
 * alone: one that supplies its own element rules, and needs the values those
 * rules read.
 *
 * Layers: the shims sit in `ds.tokens`, beside the other primitive values
 * @canonical/styles ships, which is where a maintainer looking for a token name
 * will look. The scale opens `ds.modifiers` itself.
 */

/* The typographic scale these shims bridge to. */
@import url("@canonical/design-tokens/dist/modifiers.typography.css");

/* ── TEMP FIX: design-tokens naming mismatch ──────────────────────
 * modifiers.typography.css uses kebab-case references but
 * sets.primitive.css defines camelCase tokens. This shim bridges the
 * gap until the tokens package is fixed upstream.
 */
@layer ds.tokens {
  /* The default grid unit.
   *
   * Declared once, here, so the engines and elements.css can read
   * --baseline-height bare rather than repeating a fallback at each of the
   * twenty-six places they read it — where the value would drift the first time
   * someone changed one of them.
   *
   * At zero weight, on purpose. `:where(:root)` has the specificity of nothing
   * at all, so any real declaration of the property beats it whatever the order
   * within this layer: @canonical/styles declares it at :root in spacing.css,
   * one class's worth of weight, and an application or a component may declare
   * it on any element, in rem or px, and be obeyed.
   *
   * A stylesheet that takes an engine without this file has no default and must
   * declare the unit itself; see the engine headers. */
  :where(:root) {
    --baseline-height: 0.25rem;
  }

  :root {
    /* ── Font family shims ────────────────────────────────────────── */
    --typography-font-family-default: var(--typography-fontFamily-default);
    --typography-font-family-code: var(--typography-fontFamily-code);
    --typography-font-family-sans-serif: var(--typography-fontFamily-sansSerif);
    --typography-font-family-monospace: var(--typography-fontFamily-monospace);

    /* ── Font weight shims ────────────────────────────────────────── */
    --typography-weight-semi-bold: var(--typography-weight-semiBold);
    --typography-weight-extra-bold: var(--typography-weight-extraBold);
    --typography-weight-extra-light: var(--typography-weight-extraLight);

    /* ── Font size shims ──────────────────────────────────────────── */
    --dimension-size-font-size-250: var(--dimension-size-fontSize-250);
    --dimension-size-font-size-300: var(--dimension-size-fontSize-300);
    --dimension-size-font-size-350: var(--dimension-size-fontSize-350);
    --dimension-size-font-size-400: var(--dimension-size-fontSize-400);
    --dimension-size-font-size-500: var(--dimension-size-fontSize-500);
    --dimension-size-font-size-600: var(--dimension-size-fontSize-600);
    --dimension-size-font-size-700: var(--dimension-size-fontSize-700);

    /* ── Letter spacing shims ─────────────────────────────────────── */
    --dimension-letter-spacing-default: var(--dimension-letterSpacing-default);
    --dimension-letter-spacing-wide: var(--dimension-letterSpacing-wide);

    /* ── Line height shims ────────────────────────────────────────── *
     * number.tokens.json defines these as $type:"number" but the
     * terrazzo plugin does not emit them in sets.primitive.css.
     * Hardcoded here until the build pipeline includes number tokens.
     *
     * These are unitless RATIOS (font-size × ratio = target line-height). The
     * engine then does round(up, font-size × ratio, --baseline-height), which
     * snaps the result onto the grid. So the 4px baseline needs NO change here:
     * a 1rem × 1.5 = 24px line snaps to 24px at both 8px (3 units) and 4px
     * (6 units) — the px is identical, only the unit COUNT differs. (An earlier
     * pass wrongly doubled these, which doubled the actual line-height and drifted
     * from the controls; reverted to the design-token ratios.) */
    --number-line-height-250: 1.3333;
    --number-line-height-300: 1.4286;
    --number-line-height-350: 1.5;
    --number-line-height-400: 1.3333;
    --number-line-height-500: 1.3333;
    --number-line-height-600: 1.25;
    --number-line-height-700: 1.1429;
  }
}