/* Greenlight Approvals — shared design tokens (portal-readiness constraint PR-5).
 *
 * THIS FILE IS THE ONLY PLACE A COLOUR LITERAL MAY APPEAR.
 * Every surface (views, and later the server-rendered decision page) reads these
 * token NAMES. Phase A only ever emits the defaults below. A later
 * `theme(accountId)` module re-emits this same block server-side with
 * per-account values — which is why the block is flat, self-contained, and
 * contains no selectors other than :root.
 *
 * Email cannot use custom properties (Outlook drops them). Email must
 * interpolate these VALUES as literals at send time from the same source.
 *
 * Palette provenance: extracted from views/item-view/index.html and
 * views/board-view/index.html. `--green-dark` was REFERENCED but never DEFINED
 * in board-view (.btn.approve:hover) — the value below is newly chosen, not
 * extracted. `--blue` and `--surface-alt` were inline hex literals (#0073ea,
 * #f6f7fb) in board-view; they are tokens now.
 */

:root {
  /* ---- Brand & status hues ---- */
  --green:       #00c875;
  --green-dark:  #00a862;   /* NEW: board-view referenced this and never defined it */
  --red:         #e2445c;
  --red-dark:    #c93a50;
  --amber:       #fdab3d;
  --blue:        #0073ea;   /* was an inline literal in board-view */

  /* ---- Tinted status surfaces (derived from the hues above) ---- */
  --green-tint:  #e9f9f1;
  --red-tint:    #fdecef;
  --amber-tint:  #fff5e8;
  --blue-tint:   #e9f2fd;

  /* ---- Text ---- */
  --ink:         #323338;
  --muted:       #676879;
  --on-brand:    #ffffff;

  /* ---- Surfaces & lines ---- */
  --surface:     #ffffff;
  --surface-alt: #f6f7fb;   /* was an inline literal in board-view */
  --line:        #e6e9ef;
  --line-strong: #c5c7d0;

  /* ---- Focus ---- */
  --focus:       #0073ea;
  --focus-ring:  0 0 0 3px rgba(0, 115, 234, 0.25);

  /* ---- Typography ---- */
  --font-sans: -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fw-normal:   400;
  --fw-semibold: 600;
  --lh-tight: 1.3;
  --lh-base:  1.5;

  /* ---- Shape & rhythm ---- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-pill: 999px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
}