/* shared/css/tokens.css -- GPFD design tokens
   (module redesign Phase 2; APP_MODULE_REDESIGN.md section 3.7)

   LINK ORDER in <head>, from a page one folder down:
     <link rel="stylesheet" href="../navbar.css" />
     <link rel="stylesheet" href="../sidenav.css" />
     <link rel="stylesheet" href="../bottom-nav.css" />
     <link rel="stylesheet" href="../shared/css/tokens.css" />
     <link rel="stylesheet" href="../shared/css/base.css" />
     <style> ...the page's own rules... </style>
   The page's own :root comes later, so it wins. A page adopting this file keeps
   only the variables whose value DIFFERS from the ones below.

   THE VALUES ARE THE ONES THE PAGES USE, NOT theme.css's. Each is the most
   common value among the pages that define the variable (b48419d, 59 pages).
   theme.css disagrees on --gold-pale, --border, --radius, --radius-lg and
   --surface; moving a page onto theme.css's values would change how it looks
   (REDESIGN_FINDINGS.md RF-033).

   Deliberately absent:
     --amber   two values tie at 8 pages each (#e0bd46 and #e0a33a), with two
               more in use; there is no standard to share yet.

   Served from /shared/, never /assets/: /assets/ is cached as immutable, and
   .css under /shared/ revalidates on every load so a deploy is never stale. */

:root {
  /* Brand */
  --gold: #d4aa2c;
  --gold-light: #f0c94a;
  --gold-pale: rgba(212, 170, 44, 0.14);

  /* Status colours */
  --red: #c91622;
  --red-dim: rgba(201, 22, 34, 0.18);
  --green: #2daa6e;

  /* Borders */
  --border: rgba(212, 170, 44, 0.28);
  --border-strong: rgba(224, 189, 70, 0.5);
  --border-hover: rgba(212, 170, 44, 0.55);

  /* Text */
  --text: #f3efe7;
  --text-muted: #b9b0a4;
  --text-faint: #81786e;

  /* Surfaces. Only about half the pages that define --surface agree on it. */
  --surface: rgba(10, 10, 10, 0.92);
  --surface-alt: #181818;

  /* Type */
  --font: "DM Sans", sans-serif;
  --display: "Oswald", "DM Sans", sans-serif;
  --mono: "DM Mono", monospace;

  /* Shape */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
}