/* Parent_Filter shared design tokens.
 *
 * This is guide/guide.css's :root, lifted out so the app surfaces can use the
 * same palette the generated guide has always used. Until now every surface
 * carried its own: /analyze was on #F7F5EF paper with a #B08A28 gold, the guide
 * on #f7f1e6 with #d9a441, and the extension popup on blue-on-near-black — so
 * the two halves of the product did not look related, which is the thing a
 * parent notices before they notice anything else.
 *
 * guide/guide.css KEEPS its own copy on purpose and must stay self-contained:
 * it ships as offline output next to a generated guide, on a machine that may
 * have no network and certainly has no parentfilter.app. Two copies of a
 * palette is exactly how two palettes drift, so the site suite parses the
 * :root out of both files and fails if any shared property disagrees. Add a
 * colour here and in guide.css, or add it here alone — but never change one
 * value in one place.
 *
 * Properties below the guide.css block are additions this file owns: the design
 * uses a page ground distinct from the panel paper, a stronger outer border,
 * and a second dim for body copy that sits above --dim.
 */

:root {
  --paper: #f7f1e6;
  --card: #fffcf5;
  --card-soft: #f3ecdd;
  --line: #e2d8c3;
  --ink: #2b2519;
  --dim: #766c5a;

  --brand: #d9a441;          /* project amber */
  --brand-ink: #16110a;
  --brand-deep: #8a641c;

  --skip: #d4756a;  --skip-ink: #a34437;  --skip-soft: #f9e4e0;
  --mute: #6fbec2;  --mute-ink: #23707a;  --mute-soft: #e0f1f2;
  --blur: #a798d6;  --blur-ink: #64509e;  --blur-soft: #ece7f8;

  --sev0: #6f9c62;           /* none  — soft green  */
  --sev1: #c99a2e;           /* mild  — amber       */
  --sev2: #c97a35;           /* moderate — orange   */
  --sev3: #bf4f42;           /* severe — red-clay   */

  --ok: #4d7c46;
  --err: #b3402f;
  --err-soft: #fbe7e2;
  --warn-soft: #fdf3d8;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(60, 48, 20, 0.06), 0 6px 20px rgba(60, 48, 20, 0.07);
  --serif: Charter, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- additions this file owns ---- */

  /* The page behind the panels. --paper is the panel itself, so a page painted
     --paper leaves the panels with no edge to sit on. */
  --paper-page: #fffcf5;

  /* The outer edge of a raised panel. --line is an interior divider and reads
     as a seam, not a boundary, once there is a shadow under the panel. */
  --line-strong: #d3c9b4;

  /* Body copy that must stay readable at 15–17px. --dim is a label colour; it
     is too light to carry a paragraph. */
  --dim-strong: #5f574a;

  /* The raised-panel shadow. --shadow is the guide's flatter card. */
  --shadow-panel: 0 2px 4px rgba(60, 48, 20, 0.06), 0 18px 44px rgba(60, 48, 20, 0.10);

  /* The lit state of --brand. Amber is the one loud colour on the page, so its
     hover has to stay amber rather than darken toward the deep gold, which
     reads as the button going inactive. */
  --brand-hover: #e2b054;

  /* A scrim over moving picture — the player notice and its toasts. Warm and
     nearly black, matched to --brand-ink: the previous value was a blue-grey
     left over from the old cool palette and sat on warm paper looking like a
     different application had drawn it. */
  --scrim: rgba(20, 16, 8, 0.88);
}

* { box-sizing: border-box; }

/* Class rules like `.waiting { display: flex }` outrank the UA sheet's
   [hidden] { display: none }, so hidden elements would still render. Carried
   over from guide.css, where the same bug was found first. */
[hidden] { display: none !important; }