/**
 * The hook-reference design system's colour tokens, for both themes
 * (docs/SPEC-dark-theme.md §5.1).
 *
 * The eleven `--gwd-*` tokens lived at the top of gw-hook-dossier.css, so a sheet
 * that did not depend on that file could not see them. They are here now, first in
 * the chain: gw-hook-platform.css depends on this, and the dossier depends on that.
 *
 * ── Light is today's site, and nothing here changes it ─────────────────────
 *
 * `:root` holds the light values, which are the colours the sheets have always
 * painted. The dark values are declared on `body.gw-themed` and nowhere else.
 * That is deliberate and it is the opposite of the Atlas's pattern: the Atlas
 * declares dark on `:root:not([data-theme])` under `prefers-color-scheme`, which is
 * safe there because the sheet only ever loads on an Atlas page. THIS file loads on
 * every page the platform renders, so a dark block on `:root` would turn the ink
 * pale on a white theme card for every visitor with a dark device, on pages that
 * have not been migrated and have no dark surface to sit on. `body.gw-themed` is
 * added by Theme::body_class() only for a page that is migrated and only with the
 * option on, so an unmigrated page is light whatever the visitor chose.
 *
 * ── Every token is defined for both themes ─────────────────────────────────
 *
 * The dark block redefines the SAME names the light block defines; it never
 * introduces one (the Atlas's rule). tools/test-theme-blocks.php fails the build if
 * a name is in one theme and not the other, or if the two dark blocks below, one
 * for an explicit choice and one for Device, ever differ. CSS cannot share a block
 * between an attribute selector and a media query, so the values appear twice and
 * the suite is what keeps them one.
 *
 * ── This sheet is the one place a literal colour belongs ───────────────────
 *
 * Defining a colour is what a token IS, so preflight's CHECK K (which holds every
 * other migrated sheet to a budget of hard-coded colours) is told to leave this one
 * alone with the marker `theme: fixed-sheet`, here, once.
 *
 * ── And every pair is measured ─────────────────────────────────────────────
 *
 * tools/test-theme-contrast.php reads this file, lifts both palettes, and does the
 * WCAG 2.1 sum over the pairs the sheets really paint: 4.5:1 for text, 3:1 for the
 * edge of anything a visitor operates, in both themes. The numbers beside the
 * values below are those measurements against the card.
 */

:root {
  /* The eleven the sheets already used. */
  --gwd-ink: #151c1a;          /* 17.3:1 on the card */
  --gwd-muted: #5f6864;        /*  5.8:1 on the card, 4.8:1 on a tag. Was #68716d, 4.2:1 on a tag: the D7 fix, spec §5.4 */
  --gwd-paper: #eceae5;        /* the page behind the card */
  --gwd-page: #fafafa;         /* the page behind the card on the theme's own pages (P5): what the theme paints, not the hook pages' warmer paper */
  --gwd-light: #f8f7f3;        /* raised: rail cards, panels, tables */
  --gwd-line: #cbc8c1;         /* hairlines; decoration, not held to 3:1 */
  --gwd-orange: #df5e31;       /* rules, bars, rings: 3.0:1, fine for those and not for text */
  /*
   * The SAME orange, dark enough to carry text.
   *
   * `--gwd-orange` is a 3.0–3.6:1 pair against every ground this design uses,
   * which is fine for a 3px rule, a bar segment or a focus ring and fails AA
   * for anything anybody has to read. It is not corrected in place because it
   * passes in exactly those non-text uses and is the archive's accent colour;
   * this is the reading-strength member of the same family — 5.5:1 on white,
   * 4.9:1 on `--gwd-light`, 4.6:1 on `--gwd-paper`.
   *
   * The rule that follows from that: `--gwd-orange` for borders, bars, rules
   * and focus rings; `--gwd-orange-deep` for any `color`, and for any fill
   * with text on top of it.
   *
   * On the dark theme the relation inverts: `--gwd-orange` is 5.0:1 on the dark
   * card and could carry text, but the rule above still holds so the same
   * declarations are right in both themes.
   */
  --gwd-orange-deep: #b0431c;
  /*
   * The same orange as a FILL with text on it (white on it is 5.7:1), in both themes.
   * `--gwd-orange-deep` is the one you READ, and goes pale on dark where it is 6.8:1 on
   * the card; white on a pale orange is 2.7:1, so a button that is orange with white
   * writing (the photo bench's pressed state, an active pill) takes this one instead.
   */
  --gwd-orange-fill: #b0431c;
  --gwd-green: #194b42;        /* a FILL: white on it is 9.9:1, in both themes */
  --gwd-green-soft: #dce8e3;
  --gwd-serif: Georgia, "Times New Roman", serif;
  --gwd-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Used by three sheets and declared by none until now. */
  --gwd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Roles the dark theme needed that were literals before. */
  --gwd-surface: #ffffff;      /* the content card (theme-owned today) */
  --gwd-body: #444444;         /*  9.7:1 */
  --gwd-text2: #4d5752;        /* secondary text, written 76 times without a name */
  --gwd-link: #0645ad;         /*  8.5:1 */
  --gwd-green-text: #194b42;   /* green you READ (9.9:1); the fill stays --gwd-green */
  --gwd-rule: #151c1a;         /* the heavy rule under a section heading */
  --gwd-field: #ffffff;        /* inputs */
  --gwd-chip: #eceae5;         /* small tags */
  --gwd-mat: #e0dcd3;          /* the tile behind a hook silhouette */
  --gwd-sil: none;             /* a one-colour silhouette's filter: inverted on dark */
  --gwd-sil-bg: #e1ddd5;
  --gwd-draw: transparent;
  --gwd-draw-ink: #151c1a;
  --gwd-plate: #f8f7f3;
  --gwd-bench-edge: #1d2823;
  --gwd-btn-bg: #111111;       /* the primary button, which inverts on dark */
  --gwd-btn-fg: #ffffff;
  --gwd-btn-line: #151c1a;     /* the secondary button's edge */
  --gwd-header: #111111;       /* the theme's header bar, near-black in both */
  --gwd-header-line: transparent;
  --gwd-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);

  /* The roles the hook-page sheets paint (3.0.171): status colours, the quieter greys and lines, the dark bar. */
  --gwd-faint: #6a726e;
  --gwd-link2: #356b8c;
  --gwd-brown-fg: #7a4e2d;
  --gwd-ok-fg: #2b7253;
  --gwd-warn-fg: #785317;
  --gwd-bad-fg: #9b4939;
  --gwd-info-fg: #1a4a7a;
  --gwd-ok-bg: #d6eadf;
  --gwd-warn-bg: #f7f0d6;
  --gwd-bad-bg: #f8d7da;
  --gwd-info-bg: #dcebfa;
  --gwd-ok-line: #77c797;
  --gwd-warn-line: #dbbd62;
  --gwd-orange-bg: #f4e3dc;
  --gwd-orange-line: #e0bcac;
  --gwd-bad-line: #a3261b;
  --gwd-info-line: #a8cdf0;
  --gwd-wash: #e3e8e5;
  --gwd-sunk: #e1ddd5;
  --gwd-line-soft: #e8e3da;
  --gwd-line-strong: #a9a9a9;
  --gwd-edge: #888888;
  --gwd-bar-bg: #111111;
  --gwd-copper: #c47d3a;
  --gwd-coral: #e57373;
  --gwd-tag-bg: #a9a9a9;
  --gwd-link-hover: #1e6aa5;
  --gwd-dim: #9aa19d;
  --gwd-head: #333333;
}

/*
 * `color-scheme` is for the browser's own parts, which no stylesheet reaches: form
 * fields, the clear button in a search box, scrollbars. Set only where a visitor's
 * choice is explicit; for Device the `<meta name="color-scheme" content="light dark">`
 * Theme::head() prints lets the browser follow the device by itself.
 */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* Dark: an explicit choice. */
html[data-theme="dark"] body.gw-themed {
  --gwd-ink: #e8eeea;          /* 15.5:1 on the card */
  --gwd-muted: #97a69e;        /*  7.2:1 */
  --gwd-paper: #0a0f0d;
  --gwd-page: #0a0f0d;
  --gwd-light: #161f1b;
  --gwd-line: #2a3832;
  --gwd-orange: #df5e31;       /*  5.0:1: on dark it can carry text too */
  --gwd-orange-deep: #ee7f55;  /*  6.8:1 */
  --gwd-orange-fill: #b0431c;
  --gwd-green: #194b42;
  --gwd-green-soft: rgba(127, 196, 174, 0.14);

  --gwd-surface: #101713;
  --gwd-body: #c9d4ce;         /* 12.0:1 */
  --gwd-text2: #aab8b0;
  --gwd-link: #8fc3dd;         /*  9.6:1 */
  --gwd-green-text: #7fc4ae;   /*  9.0:1 */
  --gwd-rule: #8fa097;
  --gwd-field: #141c18;
  --gwd-chip: #1b2621;
  --gwd-mat: #1b2621;
  --gwd-sil: invert(0.92);
  --gwd-sil-bg: #f7eaf0;
  --gwd-draw: #f8f6f1;
  --gwd-draw-ink: #151c1a;
  --gwd-plate: #f4f2ec;
  --gwd-bench-edge: #34463d;
  --gwd-btn-bg: #e8eeea;
  --gwd-btn-fg: #0f1613;
  --gwd-btn-line: #5e7066;
  --gwd-header: #070a09;
  --gwd-header-line: #1f2b26;
  --gwd-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  --gwd-faint: #8a9991;
  --gwd-link2: #8fb8cf;
  --gwd-brown-fg: #d6a77f;
  --gwd-ok-fg: #86d0ad;
  --gwd-warn-fg: #e3b968;
  --gwd-bad-fg: #f09184;
  --gwd-info-fg: #8dbcf0;
  --gwd-ok-bg: #16322a;
  --gwd-warn-bg: #30270f;
  --gwd-bad-bg: #3a1d20;
  --gwd-info-bg: #14283b;
  --gwd-ok-line: #2f6b4d;
  --gwd-warn-line: #7d6128;
  --gwd-orange-bg: #33201a;
  --gwd-orange-line: #6e4030;
  --gwd-bad-line: #b4483f;
  --gwd-info-line: #345b82;
  --gwd-wash: #1b2621;
  --gwd-sunk: #222e28;
  --gwd-line-soft: #1f2a25;
  --gwd-line-strong: #566a60;
  --gwd-edge: #6f8178;
  --gwd-bar-bg: #070a09;
  --gwd-copper: #c47d3a;
  --gwd-coral: #e57373;
  --gwd-tag-bg: #3a4a43;
  --gwd-link-hover: #b9dcef;
  --gwd-dim: #7d8f86;
  --gwd-head: #e8eeea;
}

/* Dark: Device, with the device set to dark. The SAME values as above (a suite keeps them one). */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.gw-themed {
    --gwd-ink: #e8eeea;
    --gwd-muted: #97a69e;
    --gwd-paper: #0a0f0d;
    --gwd-page: #0a0f0d;
    --gwd-light: #161f1b;
    --gwd-line: #2a3832;
    --gwd-orange: #df5e31;
    --gwd-orange-deep: #ee7f55;
    --gwd-orange-fill: #b0431c;
    --gwd-green: #194b42;
    --gwd-green-soft: rgba(127, 196, 174, 0.14);

    --gwd-surface: #101713;
    --gwd-body: #c9d4ce;
    --gwd-text2: #aab8b0;
    --gwd-link: #8fc3dd;
    --gwd-green-text: #7fc4ae;
    --gwd-rule: #8fa097;
    --gwd-field: #141c18;
    --gwd-chip: #1b2621;
    --gwd-mat: #1b2621;
    --gwd-sil: invert(0.92);
    --gwd-sil-bg: #f7eaf0;
    --gwd-draw: #f8f6f1;
    --gwd-draw-ink: #151c1a;
    --gwd-plate: #f4f2ec;
    --gwd-bench-edge: #34463d;
    --gwd-btn-bg: #e8eeea;
    --gwd-btn-fg: #0f1613;
    --gwd-btn-line: #5e7066;
    --gwd-header: #070a09;
    --gwd-header-line: #1f2b26;
    --gwd-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --gwd-faint: #8a9991;
    --gwd-link2: #8fb8cf;
    --gwd-brown-fg: #d6a77f;
    --gwd-ok-fg: #86d0ad;
    --gwd-warn-fg: #e3b968;
    --gwd-bad-fg: #f09184;
    --gwd-info-fg: #8dbcf0;
    --gwd-ok-bg: #16322a;
    --gwd-warn-bg: #30270f;
    --gwd-bad-bg: #3a1d20;
    --gwd-info-bg: #14283b;
    --gwd-ok-line: #2f6b4d;
    --gwd-warn-line: #7d6128;
    --gwd-orange-bg: #33201a;
    --gwd-orange-line: #6e4030;
    --gwd-bad-line: #b4483f;
    --gwd-info-line: #345b82;
    --gwd-wash: #1b2621;
    --gwd-sunk: #222e28;
    --gwd-line-soft: #1f2a25;
    --gwd-line-strong: #566a60;
    --gwd-edge: #6f8178;
    --gwd-bar-bg: #070a09;
    --gwd-copper: #c47d3a;
    --gwd-coral: #e57373;
    --gwd-tag-bg: #3a4a43;
    --gwd-link-hover: #b9dcef;
    --gwd-dim: #7d8f86;
    --gwd-head: #e8eeea;
  }
}

/*
 * Print is always the light theme: it is for paper. Last, with the same specificity
 * as the dark blocks, so it wins by order, for both an explicit choice and Device.
 */
@media print {
  html[data-theme] body.gw-themed,
  html:not([data-theme]) body.gw-themed {
    --gwd-ink: #151c1a;
    --gwd-muted: #5f6864;
    --gwd-paper: #eceae5;
    --gwd-page: #fafafa;
    --gwd-light: #f8f7f3;
    --gwd-line: #cbc8c1;
    --gwd-orange: #df5e31;
    --gwd-orange-deep: #b0431c;
    --gwd-orange-fill: #b0431c;
    --gwd-green: #194b42;
    --gwd-green-soft: #dce8e3;

    --gwd-surface: #ffffff;
    --gwd-body: #444444;
    --gwd-text2: #4d5752;
    --gwd-link: #0645ad;
    --gwd-green-text: #194b42;
    --gwd-rule: #151c1a;
    --gwd-field: #ffffff;
    --gwd-chip: #eceae5;
    --gwd-mat: #e0dcd3;
    --gwd-sil: none;
    --gwd-sil-bg: #e1ddd5;
    --gwd-draw: transparent;
    --gwd-draw-ink: #151c1a;
    --gwd-plate: #f8f7f3;
    --gwd-bench-edge: #1d2823;
    --gwd-btn-bg: #111111;
    --gwd-btn-fg: #ffffff;
    --gwd-btn-line: #151c1a;
    --gwd-header: #111111;
    --gwd-header-line: transparent;
    --gwd-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    --gwd-faint: #6a726e;
    --gwd-link2: #356b8c;
    --gwd-brown-fg: #7a4e2d;
    --gwd-ok-fg: #2b7253;
    --gwd-warn-fg: #785317;
    --gwd-bad-fg: #9b4939;
    --gwd-info-fg: #1a4a7a;
    --gwd-ok-bg: #d6eadf;
    --gwd-warn-bg: #f7f0d6;
    --gwd-bad-bg: #f8d7da;
    --gwd-info-bg: #dcebfa;
    --gwd-ok-line: #77c797;
    --gwd-warn-line: #dbbd62;
    --gwd-orange-bg: #f4e3dc;
    --gwd-orange-line: #e0bcac;
    --gwd-bad-line: #a3261b;
    --gwd-info-line: #a8cdf0;
    --gwd-wash: #e3e8e5;
    --gwd-sunk: #e1ddd5;
    --gwd-line-soft: #e8e3da;
    --gwd-line-strong: #a9a9a9;
    --gwd-edge: #888888;
    --gwd-bar-bg: #111111;
    --gwd-copper: #c47d3a;
    --gwd-coral: #e57373;
    --gwd-tag-bg: #a9a9a9;
    --gwd-link-hover: #1e6aa5;
    --gwd-dim: #9aa19d;
    --gwd-head: #333333;
  }
}