@fairgarden/design 0.1.0-0.canary.0

package/utils/roles.css

@@ -0,0 +1,799 @@
+/*
+ * Role maps (§1.5.3, §1.11.9, §1.5.16), follow-OS strategy.
+ *
+ * Keyed on data-ground / data-tone / data-scheme, which Ground and every
+ * component root write from React context [D148]. Each alias is declared on
+ * the element carrying the attribute, so var(--primaryN) / var(--secondaryN)
+ * resolve with that element's OWN scales (its primary<Scale> class, or the
+ * values it inherits from its scope). Roles name role scale steps, never a
+ * Radix variable, except --role-ground, the preset's fixed ground step.
+ *
+ * `page` schemes (the eight page grounds [D176]) take the light map, and the
+ * dark map under the root's dark selectors. `light` / `dark` schemes (the
+ * night band, the fields and light islands) keep their preset map in both
+ * modes. --role-seam is visible only on the night band in dark mode [D179].
+ *
+ * --role-edge (the container edge) is not keyed here: Ground's kind class
+ * publishes it on each scope [D178], and component roots inherit it.
+ *
+ * Hover [D181]: --role-link-hover, --role-action-hover (the label stays
+ * --role-action-label, the edge is unchanged), --role-select-hover, and
+ * --role-soft-hover, the outline Button's --primary3 fill (the ground where
+ * soft fills drop). --role-soft-hover-face is the same hover for a part
+ * whose rest face is --role-halo (the slider thumb): --primary3 where soft
+ * fills apply, --role-halo (no change) where they drop, so the face never
+ * turns the ground color [D181]. --secondary-hover is the per-scale lighter
+ * neighbour (step 10 in a dark scope; step 8 where 10 would drop a white
+ * label below 4.5:1) that the scales module publishes.
+ *
+ * Selection mark, light page grounds (§1.4.7): the secondary's own
+ * contrast ink where it carries text on step 9 (--secondary-light-mark,
+ * which each secondary scales class publishes: --yellow12 8.68 on pollen,
+ * --purple1 5.07 on heather, --indigo1 5.12 for an indigo override), else
+ * --primary12 (P12*: green, blue, orange; red's is glyph-only). So an
+ * overridden secondary never leaves --primary12 on a fill it fails, e.g.
+ * --olive12 on --indigo9 at 3.13:1 (§9.5).
+ *
+ * Text-bearing selection: --role-select-text / -label / -edge / -hover, for
+ * a selected state that carries words (option pill, filter chip with a
+ * label). It is the selection pair wherever the mark is text-safe, and the
+ * inverse pair on light rose, where --mauve12 on --red9 is 4.16:1 (glyph
+ * only); glyph-only marks (✓, ●, thumbs) keep --role-select there
+ * [decided by orchestrator; flagged for user review, §1.8].
+ *
+ * Danger [D192]: destructive actions are red. --danger1…12 is the §1.5.4
+ * danger status scale (red), published on every scope so it resolves in
+ * that scope's mode. --role-danger / -label / -edge / -hover are the
+ * destructive solid Button's fill, label, edge and hover fill (the Menu's
+ * destructive highlight takes the fill and label); --role-danger-text is
+ * the danger ink on the ground (outline and text Button labels, Menu and
+ * Toast labels). Light scopes: fill --danger11 with --danger1 (5.11:1;
+ * light 9 and 10 carry no text), hover --danger12 (the lighter 10 drops
+ * the label to 4.28:1, so it takes the darker neighbour, as D181's step-10
+ * rule does). Dark scopes: fill --danger9 with --danger1 (4.75), hover
+ * --danger10 (5.57). Where red text fails (leaf, clay, royal) the label
+ * falls back to --primary12 and the red stays in the edge and glyph.
+ *
+ * Charts [D125]: --role-series-odd is the odd series slots' ink,
+ * --secondary11 on light base grounds (and a `white` plate) and --primary12
+ * elsewhere (§8.7); the --fgd-series-fill / --fgd-series-pattern switches
+ * (tokens.css) pick the sequential cells' screen fill or one-ink pattern.
+ */
+@layer roles {
+  /* System defaults: the page root is a paper band, olive × green, action amber (§1.4.3). */
+  :root {
+    --primary1: var(--olive1);
+    --primary2: var(--olive2);
+    --primary3: var(--olive3);
+    --primary4: var(--olive4);
+    --primary5: var(--olive5);
+    --primary6: var(--olive6);
+    --primary7: var(--olive7);
+    --primary8: var(--olive8);
+    --primary9: var(--olive9);
+    --primary10: var(--olive10);
+    --primary11: var(--olive11);
+    --primary12: var(--olive12);
+    --primary-contrast: var(--olive-contrast);
+    --primary-hover: var(--olive-hover);
+    --secondary1: var(--green1);
+    --secondary2: var(--green2);
+    --secondary3: var(--green3);
+    --secondary4: var(--green4);
+    --secondary5: var(--green5);
+    --secondary6: var(--green6);
+    --secondary7: var(--green7);
+    --secondary8: var(--green8);
+    --secondary9: var(--green9);
+    --secondary10: var(--green10);
+    --secondary11: var(--green11);
+    --secondary12: var(--green12);
+    --secondary-contrast: var(--green-contrast);
+    --secondary-hover: var(--green-hover);
+    --action1: var(--amber1);
+    --action2: var(--amber2);
+    --action3: var(--amber3);
+    --action4: var(--amber4);
+    --action5: var(--amber5);
+    --action6: var(--amber6);
+    --action7: var(--amber7);
+    --action8: var(--amber8);
+    --action9: var(--amber9);
+    --action10: var(--amber10);
+    --action11: var(--amber11);
+    --action12: var(--amber12);
+    --action-contrast: var(--amber-contrast);
+    --action-hover: var(--amber-hover);
+
+    /* The page root is a band: no container edge, so --role-edge is the rule [D178]. */
+    --role-edge: var(--role-rule);
+  }
+
+  /* Every scope: invariant and fallback aliases. */
+  :root,
+  [data-ground] {
+    --role-inverse: var(--primary1);
+    --role-halo: var(--primary1); /* P1 in every scope and mode [D150] */
+    --role-seam: var(--role-ground); /* invisible; --primary12 on the night band in dark mode [D179] */
+    --role-glyph: var(--primary12);
+    --role-status: var(--secondary11);
+    --role-status-text: var(--primary12);
+    --role-status-fill: var(--role-ground);
+    --role-grain-light: var(--role-ground);
+    --role-grain-dark: var(--role-ground);
+    /* Pressed primary action: the inverse pair (§1.11.4) [D96]. */
+    --role-action-pressed: var(--primary12);
+    --role-action-pressed-label: var(--role-inverse);
+    /* Disabled edge (line-dotted-fine) [D16]; --primary12 on one-ink grounds [D85]. */
+    --role-disabled-edge: var(--role-rule);
+    /* Hover [D181]: S12 link ink, the lighter-neighbour fills, the soft outline fill. */
+    --role-link-hover: var(--secondary12);
+    --role-action-hover: var(--secondary-hover);
+    --role-select-hover: var(--secondary-hover);
+    --role-soft-hover: var(--primary3);
+    --role-soft-hover-face: var(--primary3);
+    /*
+     * The pill: a solid badge's fill, label and edge (S9, its contrast ink,
+     * S11 where S9 is below 3:1 on light grounds); the ink pill on saturated
+     * fields [D14].
+     */
+    --role-pill: var(--secondary9);
+    --role-pill-label: var(--secondary-contrast);
+    --role-pill-edge: var(--secondary11);
+    /* Text-bearing selection: the selection pair; light rose swaps in the inverse pair (below). */
+    --role-select-text: var(--role-select);
+    --role-select-text-label: var(--role-select-mark);
+    --role-select-text-edge: var(--role-select-edge);
+    --role-select-text-hover: var(--role-select-hover);
+    /* Charts: one ink off the light base grounds (§8.7) [D125]. */
+    --role-series-odd: var(--primary12);
+    /*
+     * Danger [D192]: the danger scale (red, §1.5.4), then the light map
+     * (the light page grounds and light islands): fill --danger11 with
+     * --danger1 (5.11:1), edge = fill (4.54–5.11:1 on the eight grounds),
+     * hover --danger12 (label 12.19), text --danger11 (4.54–5.11; 4.57 on
+     * the outline's --primary3 hover fill).
+     */
+    --danger1: var(--red1);
+    --danger2: var(--red2);
+    --danger3: var(--red3);
+    --danger4: var(--red4);
+    --danger5: var(--red5);
+    --danger6: var(--red6);
+    --danger7: var(--red7);
+    --danger8: var(--red8);
+    --danger9: var(--red9);
+    --danger10: var(--red10);
+    --danger11: var(--red11);
+    --danger12: var(--red12);
+    --role-danger: var(--danger11);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger11);
+    --role-danger-hover: var(--danger12);
+    --role-danger-text: var(--danger11);
+    /* Switches (tokens.css): shaped edges only on the night band in light mode [D179]. */
+    --fgd-edge-shaped: none;
+    --fgd-link-hover-line: none;
+    --fgd-soft-hover-line: none;
+    --fgd-series-fill: none;
+    --fgd-series-pattern: inline;
+  }
+
+  /* Tone-resolved aliases [D155, D141]. */
+  :root,
+  [data-tone='light-base'] {
+    --role-glyph: var(--role-accent);
+    --role-status-fill: var(--secondary4);
+    /* Two-ink charts: odd slots --secondary11 and the sequential screen fills, in both modes (§8.7). */
+    --role-series-odd: var(--secondary11);
+    --fgd-series-fill: inline;
+    --fgd-series-pattern: none;
+  }
+
+  [data-tone='tinted'] {
+    --role-glyph: var(--role-accent);
+  }
+
+  /*
+   * Soft fills drop on tinted grounds (the pastels, forest) and the solid
+   * fields: the outline Button's hover takes the bare-text underline instead
+   * of its --primary3 fill, and a --role-halo face keeps its rest face
+   * [D181].
+   */
+  [data-tone='tinted'],
+  [data-tone='dark-tinted'],
+  [data-tone='solid-light'],
+  [data-tone='solid-dark'] {
+    --role-soft-hover: var(--role-ground);
+    --role-soft-hover-face: var(--role-halo);
+    --fgd-soft-hover-line: underline;
+  }
+
+  /* Dark fixed scopes: a pill fill that reaches 3:1 is its own edge. */
+  [data-scheme='dark'] {
+    --role-pill-edge: var(--secondary9);
+    /* Danger, dark map [D192]: fill --danger9 with --danger1 (4.75), hover --danger10 (5.57); night: edge 4.50, text 8.36. */
+    --role-danger: var(--danger9);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger9);
+    --role-danger-hover: var(--danger10);
+    --role-danger-text: var(--danger11);
+  }
+
+  [data-tone='solid-light'],
+  [data-tone='solid-dark'] {
+    --role-status: var(--primary12);
+    --role-disabled-edge: var(--primary12);
+    /* One ink [D14]: link hover is that ink plus the underline; selection hovers the inverse pair [D181]. */
+    --role-link-hover: var(--primary12);
+    --role-select-hover: var(--primary11);
+    --fgd-link-hover-line: underline;
+    /* The ink pill. */
+    --role-pill: var(--primary12);
+    --role-pill-label: var(--role-inverse);
+    --role-pill-edge: var(--primary12);
+  }
+
+  /* Ink pill pressed: a --primary1 face with a --primary12 label (§1.11.10, §9.2) [D144]. */
+  [data-tone='solid-light'] {
+    --role-action-pressed: var(--primary1);
+    --role-action-pressed-label: var(--primary12);
+    --role-action-hover: var(--primary11); /* the ink pill's hover [D181] */
+  }
+
+  /* Page grounds paint the same step in both modes (§1.4.2) [D176]; their role maps follow below. */
+  :root,
+  [data-ground='paper'] {
+    --role-ground: var(--orange2);
+  }
+
+  [data-ground='white'] {
+    --role-ground: var(--olive1);
+  }
+
+  [data-ground='tide'] {
+    --role-ground: var(--blue3);
+  }
+
+  [data-ground='meadow'] {
+    --role-ground: var(--green3);
+  }
+
+  [data-ground='pollen'] {
+    --role-ground: var(--yellow3);
+  }
+
+  [data-ground='apricot'] {
+    --role-ground: var(--orange3);
+  }
+
+  [data-ground='rose'] {
+    --role-ground: var(--red3);
+  }
+
+  [data-ground='heather'] {
+    --role-ground: var(--purple3);
+  }
+
+  /*
+   * The night band and the fields (§1.5.3): fixed mode, one map in both
+   * modes; dark presets resolve through their data-theme. Fields keep their
+   * maps unchanged [D177].
+   */
+  [data-ground='night'] {
+    --role-ground: var(--blue2);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary11);
+    --role-rule: var(--primary9);
+    --role-hairline: var(--primary6);
+    --role-tint: var(--primary4);
+    --role-accent: var(--secondary9);
+    --role-select: var(--secondary9);
+    --role-select-mark: var(--secondary-contrast);
+    --role-select-edge: var(--secondary9);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-link-hover: var(--secondary9); /* --green9 5.6 */
+    --role-grain-light: var(--primary4);
+    --role-grain-dark: var(--primary1);
+    /* The one seam tone separates (from a light page ground): the shaped edge may sit here [D179]. */
+    --fgd-edge-shaped: block;
+  }
+
+  [data-ground='forest'] {
+    --role-ground: var(--green6);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary11);
+    --role-hairline: var(--primary9);
+    --role-tint: var(--primary8);
+    --role-accent: var(--secondary9);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-link-hover: var(--secondary9); /* --amber9 5.3 */
+    --role-select-hover: var(--primary11); /* the inverse pair: --sage11 */
+    --role-grain-light: var(--primary8);
+    --role-grain-dark: var(--primary6);
+    --role-disabled-edge: var(--primary12); /* one text ink [D85, D115] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='leaf'] {
+    --role-ground: var(--green9);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary11);
+    --role-tint: var(--secondary8);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--primary12);
+    --role-action-label: var(--primary1);
+    --role-action-edge: var(--primary12);
+    --role-grain-light: var(--secondary8);
+    --role-grain-dark: var(--secondary10);
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='amber'] {
+    --role-ground: var(--amber10);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary11);
+    --role-tint: var(--secondary8);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--primary12);
+    --role-action-label: var(--primary1);
+    --role-action-edge: var(--primary12);
+    --role-grain-light: var(--secondary6);
+    --role-grain-dark: var(--secondary8);
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='clay'] {
+    --role-ground: var(--orange9);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary11);
+    --role-tint: var(--secondary8);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--primary12);
+    --role-action-label: var(--primary1);
+    --role-action-edge: var(--primary12);
+    --role-grain-light: var(--secondary8);
+    --role-grain-dark: var(--secondary10);
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='pink'] {
+    --role-ground: var(--pink8);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary9);
+    --role-tint: var(--secondary7);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--primary12);
+    --role-action-label: var(--primary1);
+    --role-action-edge: var(--primary12);
+    --role-grain-light: var(--secondary7);
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='royal'] {
+    --role-ground: var(--indigo8);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary6);
+    --role-tint: var(--secondary7);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-grain-dark: var(--secondary7);
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='brick'] {
+    --role-ground: var(--red7);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary5);
+    --role-tint: var(--secondary6);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-status: var(--secondary12);
+    --role-status-text: var(--secondary12);
+    --role-grain-light: var(--secondary8);
+    --role-grain-dark: var(--secondary6);
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  /*
+   * Danger on the fields [D192]. The fill stays the mode's red (--danger11
+   * light, --danger9 dark), which sits near the field's own lightness, so
+   * the edge steps out: --danger11 on forest (4.00) and brick (3.76),
+   * --danger12 on royal (4.47), leaf (3.94), amber (7.28), clay (4.19) and
+   * pink (5.35). Danger text is --danger12 where it reaches 4.5:1 (forest
+   * 6.16, brick 5.80, amber, pink); on leaf (3.94), clay (4.19) and royal
+   * (4.47) it is the field's one ink, --primary12, and the red stays in the
+   * edge and the glyph (≥ 3:1).
+   */
+  [data-ground='forest'],
+  [data-ground='royal'],
+  [data-ground='brick'],
+  [data-ground='leaf'],
+  [data-ground='amber'],
+  [data-ground='clay'],
+  [data-ground='pink'] {
+    --role-danger-edge: var(--danger12);
+    --role-danger-text: var(--danger12);
+  }
+
+  [data-ground='forest'],
+  [data-ground='brick'] {
+    --role-danger-edge: var(--danger11);
+  }
+
+  [data-ground='royal'],
+  [data-ground='leaf'],
+  [data-ground='clay'] {
+    --role-danger-text: var(--primary12);
+  }
+
+  /*
+   * The night band in dark mode [D179]: its seam turns visible as its
+   * --primary12 (12.7–16.2:1 against the eight dark page grounds), and its
+   * shaped edge drops for that straight rule.
+   *
+   * The dark ancestor is the page's mode: data-theme on html or on a preview
+   * wrapper, neither of which carries data-ground. Ground writes
+   * data-theme="dark" on the night band itself, and that must not count, or
+   * every root nested in the band would match in light mode and drop its
+   * fringe. Nested roots match only when the page is dark, and then they
+   * restate the band's values.
+   */
+  [data-theme='dark']:not([data-ground]) [data-ground='night'] {
+    --role-seam: var(--primary12);
+    --fgd-edge-shaped: none;
+  }
+
+  /*
+   * Page grounds, dark mode (§1.11.9 and the §1.5.3 dark table) [D138, D176].
+   * `data-theme="dark"` on html, or on a preview wrapper: a `page` scheme
+   * never sits inside a fixed scope, so in a product this is always the
+   * root's mode. Each pastel paints the same step in its dark value.
+   */
+
+  :root[data-theme='dark'],
+  [data-theme='dark'] [data-ground='paper'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='white'][data-scheme='page'] {
+    --role-heading: var(--secondary12);
+    --role-muted: var(--primary11);
+    --role-rule: var(--primary9);
+    --role-hairline: var(--primary6);
+    --role-tint: var(--primary4);
+    --role-accent: var(--secondary9);
+    --role-select: var(--secondary9);
+    --role-select-mark: var(--secondary-contrast);
+    --role-select-edge: var(--secondary9);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-status-fill: var(--role-ground);
+    --role-link-hover: var(--secondary9);
+    --role-select-hover: var(--secondary-hover);
+    --role-pill: var(--secondary9);
+    --role-pill-label: var(--secondary-contrast);
+    --role-pill-edge: var(--secondary9);
+    --fgd-link-hover-line: none;
+  }
+
+  [data-theme='dark'] [data-ground='white'][data-scheme='page'] {
+    --role-tint: var(--primary3);
+  }
+
+  [data-theme='dark'] [data-ground='tide'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='meadow'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='pollen'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='apricot'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='rose'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
+    --role-heading: var(--secondary12);
+    --role-muted: var(--primary11);
+    --role-rule: var(--primary10);
+    --role-hairline: var(--primary7);
+    --role-tint: var(--primary5);
+    --role-accent: var(--secondary9);
+    --role-select: var(--secondary9);
+    --role-select-mark: var(--secondary-contrast);
+    --role-select-edge: var(--secondary9);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-status-fill: var(--role-ground);
+    --role-link-hover: var(--secondary9);
+    --role-select-hover: var(--secondary-hover);
+    --role-pill: var(--secondary9);
+    --role-pill-label: var(--secondary-contrast);
+    --role-pill-edge: var(--secondary9);
+    /* Text-bearing selection: the selection pair again (--red1 on dark --red9 is 4.75:1). */
+    --role-select-text: var(--role-select);
+    --role-select-text-label: var(--role-select-mark);
+    --role-select-text-edge: var(--role-select-edge);
+    --role-select-text-hover: var(--role-select-hover);
+    --fgd-link-hover-line: none;
+  }
+
+  [data-theme='dark'] [data-ground='rose'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
+    /* No text-safe accent (--red9 4.17, --purple10 3.55): links stay ink, and hover adds the underline [D176, D181]. */
+    --role-link-hover: var(--primary12);
+    --fgd-link-hover-line: underline;
+  }
+
+  [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
+    /* --purple9 is 2.99: accent --purple10 (3.55, non-text); selection is the inverse pair. */
+    --role-accent: var(--secondary10);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-select-hover: var(--primary11);
+    --role-pill: var(--primary12);
+    --role-pill-label: var(--role-inverse);
+    --role-pill-edge: var(--primary12);
+  }
+
+  /*
+   * Danger on the page grounds, dark mode [D192]: fill --danger9 with
+   * --danger1 (4.75), edge = fill (3.77–4.80 against the eight dark
+   * grounds), hover --danger10 (5.57), text --danger11 (6.99–8.92).
+   */
+  :root[data-theme='dark'],
+  [data-theme='dark'] [data-ground][data-scheme='page'] {
+    --role-danger: var(--danger9);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger9);
+    --role-danger-hover: var(--danger10);
+    --role-danger-text: var(--danger11);
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']),
+    :root:not([data-theme='light']) [data-ground][data-scheme='page'] {
+      --role-danger: var(--danger9);
+      --role-danger-label: var(--danger1);
+      --role-danger-edge: var(--danger9);
+      --role-danger-hover: var(--danger10);
+      --role-danger-text: var(--danger11);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']),
+    :root:not([data-theme='light']) [data-ground='paper'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='white'][data-scheme='page'] {
+      --role-heading: var(--secondary12);
+      --role-muted: var(--primary11);
+      --role-rule: var(--primary9);
+      --role-hairline: var(--primary6);
+      --role-tint: var(--primary4);
+      --role-accent: var(--secondary9);
+      --role-select: var(--secondary9);
+      --role-select-mark: var(--secondary-contrast);
+      --role-select-edge: var(--secondary9);
+      --role-action: var(--secondary9);
+      --role-action-label: var(--secondary-contrast);
+      --role-action-edge: var(--secondary9);
+      --role-status-fill: var(--role-ground);
+      --role-link-hover: var(--secondary9);
+      --role-select-hover: var(--secondary-hover);
+      --role-pill: var(--secondary9);
+      --role-pill-label: var(--secondary-contrast);
+      --role-pill-edge: var(--secondary9);
+      --fgd-link-hover-line: none;
+    }
+
+    :root:not([data-theme='light']) [data-ground='white'][data-scheme='page'] {
+      --role-tint: var(--primary3);
+    }
+
+    :root:not([data-theme='light']) [data-ground='tide'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='meadow'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='pollen'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='apricot'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='rose'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
+      --role-heading: var(--secondary12);
+      --role-muted: var(--primary11);
+      --role-rule: var(--primary10);
+      --role-hairline: var(--primary7);
+      --role-tint: var(--primary5);
+      --role-accent: var(--secondary9);
+      --role-select: var(--secondary9);
+      --role-select-mark: var(--secondary-contrast);
+      --role-select-edge: var(--secondary9);
+      --role-action: var(--secondary9);
+      --role-action-label: var(--secondary-contrast);
+      --role-action-edge: var(--secondary9);
+      --role-status-fill: var(--role-ground);
+      --role-link-hover: var(--secondary9);
+      --role-select-hover: var(--secondary-hover);
+      --role-pill: var(--secondary9);
+      --role-pill-label: var(--secondary-contrast);
+      --role-pill-edge: var(--secondary9);
+      --role-select-text: var(--role-select);
+      --role-select-text-label: var(--role-select-mark);
+      --role-select-text-edge: var(--role-select-edge);
+      --role-select-text-hover: var(--role-select-hover);
+      --fgd-link-hover-line: none;
+    }
+
+    :root:not([data-theme='light']) [data-ground='rose'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
+      /* No text-safe accent (--red9 4.17, --purple10 3.55): links stay ink, and hover adds the underline [D176, D181]. */
+      --role-link-hover: var(--primary12);
+      --fgd-link-hover-line: underline;
+    }
+
+    :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
+      /* --purple9 is 2.99: accent --purple10 (3.55, non-text); selection is the inverse pair. */
+      --role-accent: var(--secondary10);
+      --role-select: var(--primary12);
+      --role-select-mark: var(--primary1);
+      --role-select-edge: var(--primary12);
+      --role-select-hover: var(--primary11);
+      --role-pill: var(--primary12);
+      --role-pill-label: var(--role-inverse);
+      --role-pill-edge: var(--primary12);
+    }
+
+    :root:not([data-theme='light']) [data-ground='night'] {
+      --role-seam: var(--primary12);
+      --fgd-edge-shaped: none;
+    }
+  }
+
+  /*
+   * Page grounds, light mode (§1.5.3) [D176]. After the dark maps: each rule's
+   * second selector re-applies the light map under a `data-theme="light"`
+   * ancestor below html (a preview wrapper), which must beat the OS query.
+   * Every mode-dependent role is restated, so that reset is complete.
+   */
+
+  :root,
+  [data-ground='paper'],
+  :root [data-theme='light'] [data-ground='paper'][data-scheme='page'],
+  [data-ground='white'],
+  :root [data-theme='light'] [data-ground='white'][data-scheme='page'] {
+    --role-heading: var(--secondary12);
+    --role-muted: var(--primary11);
+    --role-rule: var(--primary9);
+    --role-hairline: var(--primary7);
+    --role-tint: var(--primary5);
+    --role-accent: var(--secondary11);
+    --role-select: var(--secondary9);
+    --role-select-mark: var(--secondary-light-mark, var(--primary12));
+    --role-select-edge: var(--secondary11);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary11);
+    --role-status-fill: var(--secondary4);
+    --role-link-hover: var(--secondary12);
+    --role-select-hover: var(--secondary-hover);
+    --role-pill: var(--secondary9);
+    --role-pill-label: var(--secondary-contrast);
+    --role-pill-edge: var(--secondary11);
+    --fgd-link-hover-line: none;
+  }
+
+  [data-ground='white'],
+  :root [data-theme='light'] [data-ground='white'][data-scheme='page'] {
+    --role-tint: var(--primary4);
+  }
+
+  [data-ground='tide'],
+  :root [data-theme='light'] [data-ground='tide'][data-scheme='page'],
+  [data-ground='meadow'],
+  :root [data-theme='light'] [data-ground='meadow'][data-scheme='page'],
+  [data-ground='pollen'],
+  :root [data-theme='light'] [data-ground='pollen'][data-scheme='page'],
+  [data-ground='apricot'],
+  :root [data-theme='light'] [data-ground='apricot'][data-scheme='page'],
+  [data-ground='rose'],
+  :root [data-theme='light'] [data-ground='rose'][data-scheme='page'],
+  [data-ground='heather'],
+  :root [data-theme='light'] [data-ground='heather'][data-scheme='page'] {
+    /* The pastel ladder [D176]: rule P10, hairline P8 (P7 in dark mode), tint P5; soft fills drop. */
+    --role-heading: var(--secondary12);
+    --role-muted: var(--primary11);
+    --role-rule: var(--primary10);
+    --role-hairline: var(--primary8);
+    --role-tint: var(--primary5);
+    --role-accent: var(--secondary11);
+    --role-select: var(--secondary9);
+    --role-select-mark: var(--secondary-light-mark, var(--primary12));
+    --role-select-edge: var(--secondary11);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary11);
+    --role-status-fill: var(--role-ground);
+    --role-link-hover: var(--secondary12);
+    --role-select-hover: var(--secondary-hover);
+    --role-pill: var(--secondary9);
+    --role-pill-label: var(--secondary-contrast);
+    --role-pill-edge: var(--secondary11);
+    --fgd-link-hover-line: none;
+  }
+
+  [data-ground='rose'],
+  :root [data-theme='light'] [data-ground='rose'][data-scheme='page'],
+  [data-ground='heather'],
+  :root [data-theme='light'] [data-ground='heather'][data-scheme='page'] {
+    /* The fill reaches 3:1 (--red9 3.41, --purple9 4.56), so the edge is the fill; rose's --mauve12 mark is glyph-only (4.16). */
+    --role-select-edge: var(--secondary9);
+    --role-pill-edge: var(--secondary9);
+  }
+
+  /*
+   * Light rose, text-bearing selection: --mauve12 on --red9 is 4.16:1, below
+   * text contrast, so a selected state that carries words takes the inverse
+   * pair (fill --primary12, label --role-inverse, hover --primary11), as dark
+   * heather does; glyph-only marks keep --red9 / --mauve12 (≥ 3:1)
+   * [decided by orchestrator; flagged for user review, §1.8].
+   */
+  [data-ground='rose'],
+  :root [data-theme='light'] [data-ground='rose'][data-scheme='page'] {
+    --role-select-text: var(--primary12);
+    --role-select-text-label: var(--role-inverse);
+    --role-select-text-edge: var(--primary12);
+    --role-select-text-hover: var(--primary11);
+  }
+
+  /* Danger under a light preview wrapper: the light map again [D192]. */
+  :root [data-theme='light'] [data-ground][data-scheme='page'] {
+    --role-danger: var(--danger11);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger11);
+    --role-danger-hover: var(--danger12);
+    --role-danger-text: var(--danger11);
+  }
+
+  /*
+   * The night band under a light preview wrapper keeps its light-mode seam
+   * and shaped edge. Like the dark rule, only the page's mode counts, never
+   * a data-theme that Ground writes.
+   */
+  :root [data-theme='light']:not([data-ground]) [data-ground='night'] {
+    --role-seam: var(--role-ground);
+    --fgd-edge-shaped: block;
+  }
+}