/*
  tokens/type-roles.css - Phase 0 token foundation, type role layer
  -----------------------------------------------------------------
  Rule 36 TYPOGRAPHY-ROLES-AS-COMPONENT-CONTRACT canonical type role
  tokens. Mirrors the canonical_type_roles table seeded by ora-core
  migration 2026-05-20-008-canonical-type-roles-foundation.sql.

  Layered AFTER tokens/base.css so it can resolve --font-display /
  --font-body / --font-mono. Brand Authoring V4 will override these
  per locked brand by writing to the same custom property names.

  TODAY this file is SUBSTRATE. No shipped component currently
  consumes the .type-* utility classes or the --type-* variables;
  legacy classes such as .ss-tile-value, .c-val, .pg-section-tile-title
  retain their existing visual chrome unchanged. The V4 dispatch will
  refactor components tile-by-tile after a per-tile design audit.

  Counterpart files (load order):
    1. tokens/base.css            (primitives)
    2. tokens/type-roles.css      (this file)
    3. tokens/teglo.dark.css      (theme: dark default)
    4. tokens/teglo.light.css     (theme: light)
*/

:root {
  /* Family resolution. Each role declares one of three family roles
     (heading, body, mono). These resolve to the canonical font stack
     tokens defined in tokens/base.css. */
  --type-family-heading: var(--font-display, system-ui, sans-serif);
  --type-family-body:    var(--font-body,    system-ui, sans-serif);
  --type-family-mono:    var(--font-mono,    ui-monospace, monospace);

  /* display (role_order 1): hero numbers, page-level KPI. */
  --type-display-size:           48px;
  --type-display-weight:         700;
  --type-display-line-height:    1.05;
  --type-display-letter-spacing: -0.02em;
  --type-display-case:           none;
  --type-display-family:         var(--type-family-heading);

  /* heading-l (role_order 2): section titles. */
  --type-heading-l-size:           26px;
  --type-heading-l-weight:         700;
  --type-heading-l-line-height:    1.2;
  --type-heading-l-letter-spacing: -0.01em;
  --type-heading-l-case:           none;
  --type-heading-l-family:         var(--type-family-heading);

  /* heading-m (role_order 3): card titles. */
  --type-heading-m-size:           20px;
  --type-heading-m-weight:         600;
  --type-heading-m-line-height:    1.3;
  --type-heading-m-letter-spacing: 0;
  --type-heading-m-case:           none;
  --type-heading-m-family:         var(--type-family-heading);

  /* heading-s (role_order 4): tile titles. */
  --type-heading-s-size:           15px;
  --type-heading-s-weight:         600;
  --type-heading-s-line-height:    1.4;
  --type-heading-s-letter-spacing: 0;
  --type-heading-s-case:           none;
  --type-heading-s-family:         var(--type-family-heading);

  /* body-l (role_order 5): long-form copy emphasis. */
  --type-body-l-size:           16px;
  --type-body-l-weight:         400;
  --type-body-l-line-height:    1.6;
  --type-body-l-letter-spacing: 0;
  --type-body-l-case:           none;
  --type-body-l-family:         var(--type-family-body);

  /* body-m (role_order 6): standard text. */
  --type-body-m-size:           14px;
  --type-body-m-weight:         400;
  --type-body-m-line-height:    1.55;
  --type-body-m-letter-spacing: 0;
  --type-body-m-case:           none;
  --type-body-m-family:         var(--type-family-body);

  /* body-s (role_order 7): compact text. */
  --type-body-s-size:           13px;
  --type-body-s-weight:         400;
  --type-body-s-line-height:    1.5;
  --type-body-s-letter-spacing: 0;
  --type-body-s-case:           none;
  --type-body-s-family:         var(--type-family-body);

  /* label (role_order 8): tile labels, button text, chips. */
  --type-label-size:           11px;
  --type-label-weight:         600;
  --type-label-line-height:    1.15;
  --type-label-letter-spacing: 0.04em;
  --type-label-case:           uppercase;
  --type-label-family:         var(--type-family-body);

  /* caption (role_order 9): timestamps, micro-helpers, footnotes. */
  --type-caption-size:           11px;
  --type-caption-weight:         400;
  --type-caption-line-height:    1.4;
  --type-caption-letter-spacing: 0;
  --type-caption-case:           none;
  --type-caption-family:         var(--type-family-body);

  /* mono (role_order 10): numbers in data tables, IDs, code. */
  --type-mono-size:           13px;
  --type-mono-weight:         400;
  --type-mono-line-height:    1.5;
  --type-mono-letter-spacing: 0;
  --type-mono-case:           none;
  --type-mono-family:         var(--type-family-mono);
}

/* Shorthand utility classes, one per role. Components opt in by
   adding the role class to the element. No shipped component
   consumes these yet; V4 wires them tile-by-tile. */

.type-display {
  font: var(--type-display-weight) var(--type-display-size)/var(--type-display-line-height) var(--type-display-family);
  letter-spacing: var(--type-display-letter-spacing);
  text-transform: var(--type-display-case);
}

.type-heading-l {
  font: var(--type-heading-l-weight) var(--type-heading-l-size)/var(--type-heading-l-line-height) var(--type-heading-l-family);
  letter-spacing: var(--type-heading-l-letter-spacing);
  text-transform: var(--type-heading-l-case);
}

.type-heading-m {
  font: var(--type-heading-m-weight) var(--type-heading-m-size)/var(--type-heading-m-line-height) var(--type-heading-m-family);
  letter-spacing: var(--type-heading-m-letter-spacing);
  text-transform: var(--type-heading-m-case);
}

.type-heading-s {
  font: var(--type-heading-s-weight) var(--type-heading-s-size)/var(--type-heading-s-line-height) var(--type-heading-s-family);
  letter-spacing: var(--type-heading-s-letter-spacing);
  text-transform: var(--type-heading-s-case);
}

.type-body-l {
  font: var(--type-body-l-weight) var(--type-body-l-size)/var(--type-body-l-line-height) var(--type-body-l-family);
  letter-spacing: var(--type-body-l-letter-spacing);
  text-transform: var(--type-body-l-case);
}

.type-body-m {
  font: var(--type-body-m-weight) var(--type-body-m-size)/var(--type-body-m-line-height) var(--type-body-m-family);
  letter-spacing: var(--type-body-m-letter-spacing);
  text-transform: var(--type-body-m-case);
}

.type-body-s {
  font: var(--type-body-s-weight) var(--type-body-s-size)/var(--type-body-s-line-height) var(--type-body-s-family);
  letter-spacing: var(--type-body-s-letter-spacing);
  text-transform: var(--type-body-s-case);
}

.type-label {
  font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line-height) var(--type-label-family);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: var(--type-label-case);
}

.type-caption {
  font: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-line-height) var(--type-caption-family);
  letter-spacing: var(--type-caption-letter-spacing);
  text-transform: var(--type-caption-case);
}

.type-mono {
  font: var(--type-mono-weight) var(--type-mono-size)/var(--type-mono-line-height) var(--type-mono-family);
  letter-spacing: var(--type-mono-letter-spacing);
  text-transform: var(--type-mono-case);
}