/* ============================================================================
   Typography System
   ----------------------------------------------------------------------------
   Mirrors agrodat/mobile/lib/uikit/theme/text_theme.dart.

   Raw typography tokens (--text-*, --font-weight-*, --leading-*, --tracking-*,
   --font-family) live at the top of this file — they back the role classes
   below and are also exposed as utility classes (.text-xs, .font-medium, etc.).

   Naming convention (matches Flutter AppTypography):

     <role>-<size>            base role + size (e.g. .body-sm       = 14/w400)
     <role>-<size>-<variant>  role with a typography variant suffix:
                                -s    semibold/500
                                -all  uppercase + 0.5px tracking
                                -u    underline
                                -l    light/300 + lowercase

   Five role families (Flutter parity):
     title     24 / 20 / 16 / 14 px  — headings and inline titles
     display   32 / 28 px           — large display text
     body      16 / 14 / 12 / 11 px — general content
     headline  16 / 14 px           — emphasized body (in-content emphasis)
     label     12 px                — control labels

   Compose with separate utilities for one-off tweaks:
     .text-xs, .text-sm, .text-md, .text-lg, .text-xl, .text-2xl, .text-3xl,
     .text-4xl, .text-5xl     — size-only
     .text-primary, .text-muted, .text-secondary, .text-danger, .text-success,
     .text-warning, .text-empty, .text-metos   — semantic text colors
     .font-light, .font-normal, .font-medium, .font-semibold, .font-bold
                                   — weight-only
     .uppercase, .lowercase, .underline, .tracking-wide, .tracking-tight
                                   — transform / decoration / tracking
   ============================================================================ */

/* ─── Raw typography tokens (theme-agnostic — values don't shift with theme) ─ */

:root {
  /* Size scale — extended to 5xl to cover all admin dashboard uses. */
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 32px;

  /* Font weights — mirror Flutter FontWeight values. */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Letter spacing — tracks Flutter typography convention. */
  --tracking-normal: 0;
  --tracking-wide: 0.5px;
  --tracking-tight: -0.02em;

  /* Line heights. */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.5;

  /* Font families — single source of truth. */
  --font-sans: 'Rubik', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ─── Title ────────────────────────────────────────────────────────────────── */
.title         { font-size: var(--text-3xl); font-weight: var(--font-weight-medium); line-height: var(--leading-snug); }
.title-all     { font-size: var(--text-3xl); font-weight: var(--font-weight-medium); line-height: var(--leading-snug); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.title-lg      { font-size: var(--text-2xl); font-weight: var(--font-weight-normal); line-height: var(--leading-snug); }
.title-lg-s    { font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-snug); }

.title-md      { font-size: var(--text-xl); font-weight: var(--font-weight-normal); line-height: var(--leading-snug); }
.title-md-s    { font-size: var(--text-xl); font-weight: var(--font-weight-medium); line-height: var(--leading-snug); }

/* ─── Display ──────────────────────────────────────────────────────────────── */
.display       { font-size: var(--text-4xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.display-lg    { font-size: var(--text-5xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }

/* ─── Body ─────────────────────────────────────────────────────────────────── */
.body-md       { font-size: var(--text-md); font-weight: var(--font-weight-normal); line-height: var(--leading-snug); }
.body-md-s     { font-size: var(--text-md); font-weight: var(--font-weight-medium); line-height: var(--leading-snug); }

.body-sm       { font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: var(--leading-normal); }
.body-sm-s     { font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: var(--leading-normal); }
.body-sm-s-all { font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: var(--leading-normal); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.body-sm-u     { font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: var(--leading-normal); text-decoration: underline; }

.body-xs       { font-size: var(--text-xs); font-weight: var(--font-weight-normal); line-height: var(--leading-snug); }
.body-xs-s     { font-size: var(--text-xs); font-weight: var(--font-weight-medium); line-height: var(--leading-snug); }

.body-2xs      { font-size: var(--text-2xs); font-weight: var(--font-weight-normal); line-height: var(--leading-snug); }

/* ─── Headline ─────────────────────────────────────────────────────────────── */
.headline      { font-size: var(--text-md); font-weight: var(--font-weight-normal); line-height: var(--leading-snug); }
.headline-s    { font-size: var(--text-md); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); }

.headline-sm   { font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: var(--leading-normal); }

/* ─── Label ────────────────────────────────────────────────────────────────── */
.label         { font-size: var(--text-xs); font-weight: var(--font-weight-normal); line-height: var(--leading-tight); }
.label-s       { font-size: var(--text-xs); font-weight: var(--font-weight-medium); line-height: var(--leading-tight); }

.text-2xs  { font-size: var(--text-2xs); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }

/* ─── Mono family (typography role, used inside cells / code blocks) ───────── */
.text-mono     { font-family: var(--font-mono); }
.text-right    { text-align: right; }

/* ─── Weight modifiers ─────────────────────────────────────────────────────── */
.font-light    { font-weight: var(--font-weight-light); }
.font-normal   { font-weight: var(--font-weight-normal); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

/* ─── Text colors (compose with any role or size utility) ─────────────────── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-danger    { color: var(--danger); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-empty     { color: var(--text-muted); }
.text-metos     { color: var(--color-metos); }

/* ─── Transform / tracking / decoration ────────────────────────────────────── */
.uppercase       { text-transform: uppercase; }
.lowercase       { text-transform: lowercase; }
.tracking-wide   { letter-spacing: var(--tracking-wide); }
.tracking-tight  { letter-spacing: var(--tracking-tight); }
.underline       { text-decoration: underline; }