/* ============================================================
   CShield · Typography tokens — Be Vietnam Pro
   Letter-spacing -0.015em at display sizes (32px+), 0 below.
   Line height NEVER below 1.4 for Vietnamese body (diacritic stacks).
   Never uppercase Vietnamese text. Set lang="vi" on VN content.

   Elderly `lg` variant: every size ×1.25. Activated by adding
   [data-text="lg"] / .text-lg to a root element — the --text-*
   aliases below are remapped so components scale automatically
   without restructuring layout.
   ============================================================ */
:root {
  --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* No monospace font — CShield has no column-alignment use case. */

  /* ---- Weights ---- */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */

  /* ---- Tracking ---- */
  --tracking-display: -0.015em;  /* @kind font */ /* 32px+ */
  --tracking-h2: -0.01em;        /* @kind font */
  --tracking-normal: 0;          /* @kind font */ /* body and below (also all Vietnamese body) */

  /* ---- Type scale (default): font-size ---- */
  --text-display: 40px;
  --text-h1: 32px;
  --text-h2: 24px;
  --text-h3: 18px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-label: 13px;
  --text-button: 15px;

  /* ---- Line heights ---- */
  --lh-display: 1.2;    /* @kind font */
  --lh-h1: 1.25;        /* @kind font */
  --lh-h2: 1.3;         /* @kind font */
  --lh-h3: 1.4;         /* @kind font */
  --lh-body-lg: 1.55;   /* @kind font */
  --lh-body: 1.5;       /* @kind font */
  --lh-body-sm: 1.5;    /* @kind font */
  --lh-caption: 1.4;    /* @kind font */
  --lh-label: 1.4;      /* @kind font */
  --lh-button: 1;       /* @kind font */

  /* ---- Elderly lg reference values (×1.25) ---- */
  --text-display-lg: 50px;
  --text-h1-lg: 40px;
  --text-h2-lg: 30px;
  --text-h3-lg: 22px;
  --text-body-lg-lg: 22px;
  --text-body-lg-mode: 20px;   /* Body in lg mode */
  --text-body-sm-lg: 18px;     /* never below 16px in elderly mode */
  --text-caption-lg: 15px;
  --text-label-lg: 16px;
  --text-button-lg: 18px;
}

/* Elderly large-text mode — remap the scale so every component grows. */
[data-text="lg"], .text-lg {
  --text-display: var(--text-display-lg);
  --text-h1: var(--text-h1-lg);
  --text-h2: var(--text-h2-lg);
  --text-h3: var(--text-h3-lg);
  --text-body-lg: var(--text-body-lg-lg);
  --text-body: var(--text-body-lg-mode);
  --text-body-sm: var(--text-body-sm-lg);
  --text-caption: var(--text-caption-lg);
  --text-label: var(--text-label-lg);
  --text-button: var(--text-button-lg);
}