/* ============================================================
 * Whichapp — Design Tokens v1.0
 * ------------------------------------------------------------
 * Single source of truth for typography, color, and the families
 * that make up the Whichapp visual system. Every component CSS
 * file consumes these — never declare a literal size/color/family
 * in a component rule, always reference a token.
 *
 * If you find yourself wanting to add a new token: ask whether an
 * existing one can be re-used in a different role first. The whole
 * point of a token system is constraint.
 *
 * Loaded sitewide before any component CSS. See
 * functions.php :: wp_enqueue_scripts (handle ``wp-tokens``).
 * ============================================================ */

:root {

  /* ============ TYPE SCALE ============
   * Eight-step ladder. Each step has a single semantic role.
   * Do NOT use raw pixel values in component CSS.
   *
   * Article heading ladder (descending, proportionate over the 20px
   * reading body): H1 = --fs-h1 (32) > H2 = --fs-h2 (26) > H3 =
   * --fs-h3 (22). Applied in style.css; families in typography.css. */
  --fs-micro: 11px;   /* eyebrows, micro-caps, REQ markers, footnotes */
  --fs-meta:  13px;   /* breadcrumb, author role subtitle */
  --fs-body:  15px;   /* buttons, tables, footer links, UI labels, dek */
  --fs-read:  17px;   /* long-form prose, nav items */
  --fs-h3:    22px;   /* article H3, section subheadings, verdict sentences */
  --fs-h2:    26px;   /* article H2 (the reader-visible section break) */
  --fs-h1:    32px;   /* article/page H1 titles, cost-strip metric values */
  --fs-hero:  58px;   /* the headline metric (rare; one per page max) */

  /* ============ TYPE FAMILIES ============
   * Three families, each with a single role. */
  --font-display: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, 'Times New Roman', serif;
  --font-sans:    'Source Sans 3', 'Source Sans 3 Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;

  /* ============ TYPE WEIGHTS ============ */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============ TYPE TRACKING (letter-spacing) ============
   * Tight for display, loose for micro caps. */
  --tracking-display: -0.018em;  /* H1, hero metric */
  --tracking-body:    -0.005em;  /* UI body */
  --tracking-caps:    0.14em;    /* mono uppercase: eyebrows, table headers */
  --tracking-pill:    0.10em;    /* badge/pill caps (tighter than .caps) */

  /* ============ TYPE LEADING (line-height) ============ */
  --lh-display: 1.12;  /* H1, hero */
  --lh-tight:   1.25;  /* H3, verdict */
  --lh-body:    1.5;   /* UI body */
  --lh-read:    1.6;   /* long-form prose */

  /* ============ COLOR — TEXT ============
   * Semantic, not implementation. `--color-text-muted` carries
   * intent ("this text should de-emphasise") and survives a
   * palette redesign. Avoid naming colors by their hex value. */
  --color-text-default: #0A0A0A;
  --color-text-strong:  #1F1F1D;       /* body emphasis */
  --color-text-muted:   rgb(80, 90, 105);  /* breadcrumb current */
  --color-text-mute-soft: rgb(120, 130, 145); /* breadcrumb link, helper text */
  --color-text-faint:   #9A9892;       /* placeholder, "not required" pills */

  /* ============ COLOR — BRAND ============ */
  --color-accent:       #C8362A;       /* Whichapp red */
  --color-accent-soft:  #FBE7E3;
  --color-positive:     #1F5132;
  --color-positive-soft:#E5EDE6;

  /* ============ COLOR — SURFACES ============ */
  --color-paper:        #FFFFFF;       /* page background */
  --color-panel:        #F7F6F2;       /* widget panel fills */
  --color-panel-deep:   #EFEDE5;       /* highlighted rows */
  --color-highlight:    #F2EFE7;       /* selected row, severance row */

  /* ============ COLOR — RULES ============ */
  --color-rule:         #D4D2CB;       /* primary rule lines */
  --color-hair:         #E5E3DC;       /* secondary, hairline */

  /* ============ FOCUS RING ============ */
  --focus-ring: 2px solid var(--color-accent);

}