/*
 * THE only stylesheet with colour literals (rail: styles/literals).
 * Values are the ones the archive rendered, unchanged, except three light greys darkened to the
 * nearest value that meets AA on their surface (--workflow-step-number, --rm-count-ink,
 * --rm-empty-ink; docs/DESIGN.md section 3 has the ratios before and after):
 *   light   _archive/src/site.css :root, overlaid by _archive/src/theme.css :root
 *           (theme.css loaded later, so its --muted and --blue won; site.css's were dead)
 *   dark, contrast   _archive/src/theme.css, _archive/src/accessibility.css (--field-error)
 *   .pd-app          _archive/src/product-demo.css and its theme overrides in _archive/src/theme-demo.css
 *   .rm-app          _archive/src/roadmap.css and its theme overrides in _archive/src/theme-demo.css
 *   the named surfaces below the base palette: literals the archive typed inside its home, pricing,
 *   workflow, demo, drag and use-case rules, named once here in wave 2 (each group says its source;
 *   the modules' stylesheets use them as var(--token) or var(--token, <this light value>)).
 * --paper per theme is the theme-color: the build reads the three values from the
 * :root, html[data-theme="dark"] and html[data-theme="contrast"] blocks below and injects
 * them into assets/boot/theme-preference-boot.js and <meta name="theme-color">.
 */

:root {
  --paper: #f8f9f6;
  --white: #fff;
  --ink: #22352f;
  --muted: #606d65;
  --blue: #205ed7;
  --blue-hover: #1854d2;
  --line: #e0e5df;
  --control-edge: var(--line);
  --pale-blue: #eaf0fb;
  --step-track: var(--pale-blue);
  --step-track-ink: var(--blue);
  --step-fill: var(--blue);
  --step-fill-ink: #ffffff;
  /* The project brief's size slider (modules/project-brief): the unfilled track, the light end of
     the filled part's gradient (its deep end is --blue; 3:1 or more on the dialog's --paper) and the
     glow the thumb gives off as it passes a milestone. */
  --size-track: #dce4f3;
  --size-fill-from: #4a7fe0;
  --size-glow: #205ed766;
  --mint: #e8f0e6;
  --green: #487863;
  --amber: #c99339;
  --dark: #172d2a;
  --soft-shadow: 0 18px 45px #263c3710;
  --radius: 24px;
  --font: Geist, Arial, sans-serif;
  --surface-raised: #ffffff;
  --on-accent: #ffffff;
  /* The icon tile of a chosen (solid accent) card: a darker blue on the blue, the icon in the
     card's own text colour; the resting card's tile is the pale tint with the accent icon. */
  --accent-tile: #16459f;
  --accent-tile-ink: #ffffff;
  /* A caption on the accent (a chosen card's context line): a step behind --on-accent, AA on --blue. */
  --on-accent-muted: #dbe6fb;
  --icon-filter: none;
  --focus: #2466ed;
  --theme-control-border: #74867a;
  --theme-control-hover: #edf2ea;
  --field-error: #ab3028;

  /* Literals the archive typed inside shared rules, now named once (same values). */
  --status-dot-halo: #48786310;
  --breadcrumb-separator: #a1aaa2;
  --button-primary-shadow: 0 5px 12px #2466ed15;
  --button-primary-shadow-hover: 0 7px 17px #2466ed24;
  --dialog-shadow: 0 30px 90px #14221d35;
  /* Every dialog and sheet over the page, the platform's two values (its --backdrop-scrim and
     --border-floating, docs/DESIGN.md section 3): the dim behind it, black at .5 here and .8 in
     the dark themes, never blurred; and its quiet 1 px rim, black at .08 here, white at .1 in
     dark, the full --line in contrast. One pair for the site dialog, the use-case preview, the
     report board's dialog and the object scan's sheet. */
  --backdrop-scrim: #00000080;
  --border-floating: #00000014;
  /* A field is drawn quiet: a hairline on top and sides (--field-edge, as the dividers) and the
     3:1 control boundary of WCAG 1.4.11 on its bottom edge only (--field-border). */
  --field-edge: var(--line);
  --field-border: #85928a;

  /* Surfaces the archive typed inside its home and pricing rules (_archive/src/site.css,
     _archive/src/site-motion.css, _archive/src/theme.css), named once, values unchanged. */
  --on-dark: #fff;
  --brand-mark-surface: var(--ink);
  --play-ring: #a2aea6;
  --photo-shade-top: #122a2310;
  --photo-shade-bottom: #122a2378;
  --brief-shade: #0b1f17d9;
  --brief-claim-ink: #ffffff;
  --brief-claim-accent: #a9c8ff;
  --photo-caption-shadow: #17312770;
  --preview-shadow: 0 20px 55px #23332924;
  --preview-border: #ffffffd4;
  --preview-rule: #edf0ec;
  --preview-tag-surface: #f0f3f7;
  --preview-tag-ink: #81908a;
  --preview-count-surface: #f1f3ef;
  --preview-task-border: #e6eae5;
  --preview-task-surface: #fcfcfa;
  --preview-task-done: #f2f6f0;
  --preview-assignee-ink: #3d609e;
  --preview-note-border: #e7eae5;
  --audience-ink: #62736a;
  --feature-report-surface: #ecf0e8;
  --feature-task-surface: #e9eef5;
  --feature-asset-surface: #f0ece4;
  --feature-art-shadow: 0 12px 28px #263c3710;
  --feature-note-shadow: 0 5px 18px #293c3310;
  --feature-route: #98ae95;
  --feature-line: #edf0eb;
  --feature-tile-surface: #ffffffd9;
  --feature-icon-surface: #eee9df;
  --feature-file-surface: #f5f4ef;
  --data-surface: #223b33;
  --data-glow: #344f42;
  --data-mid: #2b4439;
  --data-ink: #f4f8f3;
  --data-eyebrow: #b1cdb9;
  --data-accent: #97bda8;
  --data-text: #b8c8c0;
  --data-checks: #d0ded6;
  --data-link: #ecf5ed;
  --data-label: #b8cfc1;
  --data-dot: #83c7a2;
  --final-surface: #e8eee4;
  --final-mark: #cad2c9;
  --price-card-surface: #ffffff58;
  --featured-plan-border: #b9cef5;
  --featured-plan-label: #496fa9;

  /* The workflow section and its phone mock (folded from modules/workflow/workflow.css;
     _archive/src/site.css). */
  --workflow-surface: #edf1ec;
  --workflow-step-line: #d8dfd7;
  --workflow-step-number: #647067;
  --workflow-step-hover: #ffffff4a;
  --workflow-orbit: #d6ded4;
  --phone-frame: #25332e;
  --phone-surface: #fcfdfb;
  --phone-shadow: 5px 15px 35px #263c3720, inset 0 0 0 2px #bbc2b9;
  --phone-island: #192720;
  --phone-map-road: #fff9;
  --phone-dashed: #cad3c7;

  /* The demo tabs and the drag feedback of both demo playgrounds (folded from
     modules/report-board-demo/report-board-demo.css and components/report-board/report-board.css;
     _archive/src/roadmap.css, _archive/src/product-demo.css). */
  --demo-tabs-surface: #eef1ec;
  --demo-tab-ink: #626f67;
  --demo-tab-selected-surface: #fff;
  --demo-tab-selected-shadow: 0 2px 6px #18372c0b;
  /* The one app window both demo views sit in and its app bar (components/app-window). The
     dark and contrast blocks give the bar a surface of its own, so the window's top edge never
     takes the page colour and the frame reads as a window, not as page content. */
  --app-window-surface: #fff;
  --app-window-border: #cdd6d0;
  --app-window-shadow: 0 16px 48px #1c30280f;
  --app-bar-surface: #f6f8f7;
  --app-bar-border: #e4e9e5;
  --app-bar-ink: var(--ink);
  --app-bar-muted: var(--muted);
  --app-bar-mark-surface: var(--pale-blue);
  --app-bar-mark-ink: var(--blue);
  --drag-placeholder-edge: #9dbbf0;
  --drag-placeholder-surface: #e9f0ff80;
  --drag-ghost-shadow: 0 24px 52px #14243e29, 0 7px 15px #14243e15;

  /* The use-case pages, preview and slider (folded from modules/use-cases/use-cases.css;
     _archive/src/subpages.css, _archive/src/use-case-modal.css, _archive/src/use-case-slider.css). */
  --case-image-surface: #e8ece4;
  --panel-sage-ink: #5a6c5e;
  --card-border-sage: #dbe4d7;
  --public-card-shadow: 0 10px 30px #29463306;
  /* The one icon tile of the content cards (security, the use-case pages, the brief's option
     cards): its fill and its icon, one pair to tune for the whole site. */
  --icon-tile: #eeff8f;
  --icon-tile-ink: var(--ink);
  --rule-sage: #d6dfd3;
  --qr-path-surface: #edf1e9;
  --slider-arrow: #e8ede6;
  --slider-arrow-hover: #dbe5d9;
  --photo-placeholder: #345246;
  --photo-card-shadow: 0 8px 22px #22352f0c;
  --photo-control: #ffffff13;
  --photo-control-border: #ffffff62;
  --photo-control-hover: #ffffff2b;
  --photo-scrim: linear-gradient(180deg, #091d15d1 0%, #10251bb3 34%, #11291d00 48%, #11291d00 70%, #091d15a8 86%, #091d15c7 100%);

  /* site-shell: the header glass and the mobile panel (_archive/src/site.css .site-header,
     .mobile-nav; _archive/src/theme-surfaces.css for the dark and contrast values). */
  --header-surface: #ffffffd9;
  --header-border: #e3e7df;
  --header-backdrop: blur(20px);
  --mobile-nav-shadow: var(--soft-shadow);

  /* site-shell: the header's geometry (docs/DESIGN.md section 2). One control height, the
     44 px touch-target floor, and one radius (half of it, so the theme button is a circle and
     the language picker and the call to action are pills); a 4 px spacing step. The collapse
     breakpoint (1180 px) is not a token: a custom property cannot be read by @media, so its one
     home is the query in modules/site-shell/site-shell.css. */
  --control-height: 44px;
  --control-radius: 22px;
  /* The one field shape: every text field, select and the resting option card use it. */
  --field-radius: 7px;
  /* The one state change: every hover, focus and chosen state of a control fades on this. */
  --state-duration: 200ms;
  --state-ease: cubic-bezier(.2, .7, .2, 1);
  --space-3: 12px;
  --space-6: 24px;
  /* The phone type floor (usability round 2026-09-26, M3: the hero call to action read 10 px, the
     header's "Kosten" 9 px, the demo's buttons 9 px on a 375 px phone). What a 375 px phone shows
     never sets a control below --type-control-min or any other text below --type-caption-min: a
     phone query uses these tokens instead of stepping down, and a smaller base size is raised to
     them in a phone query of its own stylesheet (the rail styles:phone-type; the product pictures
     drawn in markup are exempt: the illustrations scaled as a whole, and the demo boards, which keep
     the platform's density, docs/DEFERRED.md). The floor binds at 375 px; between 701 and 900 px
     the desktop scale may stay (docs/DESIGN.md section 1). */
  --type-control-min: 14px;
  --type-caption-min: 12px;

  /* The one scrollbar mechanism (styles/base.css), every scroll region (docs/DESIGN.md section 3
     has the thumb ratios against --paper, --white and --surface-raised). A muted tone of --ink,
     visibly lighter than body text; the track is transparent so the surface shows through. */
  --scrollbar-thumb: #6f8579;
  --scrollbar-thumb-hover: #55695d;
  --scrollbar-track: transparent;

  /* The platform's photo viewer (vendor/lightbox/lightbox.css, on the case pages): its public
     colour names, set from this palette so its bar and buttons follow the theme. The scrim and
     what sits on it (near-black, white text and rings) keep the viewer's own values in every theme:
     photos read best on a dark neutral ground. tests/built/themes.test.mjs measures these through
     the viewer's private names (--lb-*), which its stylesheet forwards to them. */
  --lightbox-surface: var(--paper);
  --lightbox-on-surface: var(--ink);
  --lightbox-muted: var(--muted);
  --lightbox-hover: var(--theme-control-hover);
  --lightbox-accent: var(--blue);
  --lightbox-on-accent: var(--on-accent);
  --lightbox-secondary: var(--surface-raised);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101b18;
  --white: #172621;
  --surface-raised: #20342c;
  --ink: #edf4ee;
  --muted: #b3c4b9;
  --blue: #91baff;
  --blue-hover: #b2cdff;
  --line: #2e433a;
  --control-edge: #6b8476;
  --pale-blue: #203448;
  --step-track: #1f3550;
  --step-track-ink: #91baff;
  --step-fill: #2f6be0;
  --step-fill-ink: #ffffff;
  --size-track: #2a3d52;
  --size-fill-from: #5a8ef0;
  --size-glow: #91baff80;
  --mint: #233a2e;
  --green: #a4d6b9;
  --amber: #efc579;
  --dark: #0a1410;
  --soft-shadow: 0 18px 45px #00000038;
  --on-accent: #10233f;
  --accent-tile: #6392e0;
  --accent-tile-ink: #10233f;
  --on-accent-muted: #24416a;
  --icon-filter: brightness(0) invert(1);
  --focus: #b9d2ff;
  --theme-control-border: #829c8d;
  --theme-control-hover: #20342c;
  --field-error: #ffb4a8;
  --breadcrumb-separator: var(--muted);
  --button-primary-shadow: none;
  --button-primary-shadow-hover: none;
  --backdrop-scrim: #000000cc;
  --border-floating: #ffffff1a;
  --field-border: #5f7569;

  /* The home and pricing surfaces in the dark themes (_archive/src/theme-surfaces.css, theme.css). */
  --brand-mark-surface: #172d2a;
  --data-surface: #14251f;
  --data-glow: #2a4638;
  --data-mid: #1d352b;
  --final-surface: var(--mint);
  --price-card-surface: var(--white);
  --featured-plan-border: var(--blue);
  --featured-plan-label: var(--blue);

  /* Workflow, demo tabs, drag feedback and use cases in the dark themes (the markers of
     modules/workflow, modules/report-board-demo, components/report-board, modules/use-cases;
     _archive/src/theme-demo.css, theme-surfaces.css, theme.css). */
  --workflow-surface: var(--white);
  --workflow-step-line: var(--line);
  --workflow-step-number: var(--muted);
  --workflow-step-hover: var(--surface-raised);
  --workflow-orbit: var(--line);
  --phone-frame: #718679;
  --phone-surface: var(--paper);
  --phone-shadow: 5px 15px 35px #00000030, inset 0 0 0 2px var(--line);
  --phone-island: #050d09;
  --phone-map-road: var(--line);
  --phone-dashed: var(--line);
  --demo-tabs-surface: var(--paper);
  --demo-tab-ink: var(--muted);
  --demo-tab-selected-surface: var(--surface-raised);
  --demo-tab-selected-shadow: inset 0 0 0 1px var(--line);
  --app-window-surface: var(--white);
  --app-window-border: var(--line);
  --app-window-shadow: 0 16px 48px #00000059;
  --app-bar-surface: var(--surface-raised);
  --app-bar-border: var(--line);
  --app-bar-ink: var(--ink);
  --app-bar-muted: var(--muted);
  --app-bar-mark-surface: var(--pale-blue);
  --app-bar-mark-ink: var(--blue);
  --drag-placeholder-edge: var(--blue);
  --drag-placeholder-surface: var(--pale-blue);
  --case-image-surface: var(--surface-raised);
  --panel-sage-ink: var(--muted);
  --card-border-sage: var(--line);
  --icon-tile: #1c6d52;
  --rule-sage: var(--line);
  --qr-path-surface: var(--mint);
  --slider-arrow: var(--surface-raised);
  --slider-arrow-hover: var(--mint);

  /* site-shell (_archive/src/theme-surfaces.css:2). */
  --header-surface: color-mix(in srgb, var(--paper) 94%, transparent);
  --header-border: var(--line);

  --scrollbar-thumb: #6f9384;
  --scrollbar-thumb-hover: #8bb3a1;
}

html[data-theme="contrast"] {
  color-scheme: dark;
  --paper: #000000;
  --white: #000000;
  --surface-raised: #151515;
  --ink: #ffffff;
  --muted: #ffffff;
  --blue: #ffdf00;
  --blue-hover: #ffdf00;
  --line: #ffffff;
  --control-edge: #ffffff;
  --pale-blue: #151515;
  --brief-shade: #000000e6;
  --brief-claim-ink: #ffffff;
  --brief-claim-accent: #ffdf00;
  --step-track: #151515;
  --step-track-ink: #ffdf00;
  --step-fill: #ffdf00;
  --step-fill-ink: #000000;
  --size-track: #767676;
  --size-fill-from: #ffdf00;
  --size-glow: #ffdf00;
  --mint: #151515;
  --green: #b9ffc9;
  --amber: #ffdf00;
  --dark: #000000;
  --soft-shadow: none;
  --on-accent: #000000;
  --accent-tile: #000000;
  --accent-tile-ink: #ffdf00;
  --on-accent-muted: #000000;
  --icon-filter: brightness(0) invert(1);
  --focus: #ffdf00;
  --theme-control-border: #ffffff;
  --theme-control-hover: #151515;
  --field-error: #fff;
  --disabled-ink: #bbbbbb;
  --breadcrumb-separator: var(--muted);
  --button-primary-shadow: none;
  --button-primary-shadow-hover: none;
  --backdrop-scrim: #000000cc;
  --border-floating: var(--line);
  --field-border: var(--line);

  /* The home and pricing surfaces in high contrast (_archive/src/theme-surfaces.css, theme.css). */
  --brand-mark-surface: #172d2a;
  --photo-label-surface: #000;
  --data-surface: #000;
  --data-glow: #000;
  --data-mid: #000;
  --data-ink: #fff;
  --data-eyebrow: #fff;
  --data-accent: #fff;
  --data-text: #fff;
  --data-checks: #fff;
  --data-link: var(--blue);
  --data-label: #fff;
  --final-surface: var(--mint);
  --price-card-surface: var(--white);
  --featured-plan-border: var(--blue);
  --featured-plan-label: var(--blue);

  /* Workflow, demo tabs, drag feedback and use cases in high contrast (as the dark block, with
     the phone frame and island in the contrast ink). */
  --workflow-surface: var(--white);
  --workflow-step-line: var(--line);
  --workflow-step-number: var(--muted);
  --workflow-step-hover: var(--surface-raised);
  --workflow-orbit: var(--line);
  --phone-frame: var(--ink);
  --phone-surface: var(--paper);
  --phone-shadow: 5px 15px 35px #00000030, inset 0 0 0 2px var(--line);
  --phone-island: var(--ink);
  --phone-map-road: var(--line);
  --phone-dashed: var(--line);
  --demo-tabs-surface: var(--paper);
  --demo-tab-ink: var(--muted);
  --demo-tab-selected-surface: var(--surface-raised);
  --demo-tab-selected-shadow: inset 0 0 0 1px var(--line);
  --app-window-surface: var(--white);
  --app-window-border: var(--line);
  --app-window-shadow: none;
  --app-bar-surface: var(--surface-raised);
  --app-bar-border: var(--line);
  --app-bar-ink: var(--ink);
  --app-bar-muted: var(--muted);
  --app-bar-mark-surface: var(--pale-blue);
  --app-bar-mark-ink: var(--blue);
  --drag-placeholder-edge: var(--blue);
  --drag-placeholder-surface: var(--pale-blue);
  --case-image-surface: var(--surface-raised);
  --panel-sage-ink: var(--muted);
  --card-border-sage: var(--line);
  --icon-tile: #000000;
  --rule-sage: var(--line);
  --qr-path-surface: var(--mint);
  --slider-arrow: var(--surface-raised);
  --slider-arrow-hover: var(--mint);

  /* site-shell: a solid plate, no glass, an inset edge on the mobile panel
     (_archive/src/theme-surfaces.css:2,70-75). */
  --header-surface: #000;
  --header-border: var(--line);
  --header-backdrop: none;
  --mobile-nav-shadow: inset 0 0 0 1px #fff;

  /* The thumb is the ink itself: the system already draws maximum contrast here. */
  --scrollbar-thumb: var(--ink);
  --scrollbar-thumb-hover: var(--focus);
}

/* The report-board demo palette (a product preview, deliberately not the site palette in light). */
.pd-app {
  --pd-white: #fff;
  --pd-ink: #182b43;
  --pd-muted: #5b687b;
  --pd-soft-ink: #4e6178;
  --pd-blue: #2563eb;
  --pd-blue-hover: #1d52ce;
  --pd-blue-pale: #e9f0ff;
  --pd-surface: #f7f8fa;
  --pd-border: #e9edf2;
  --pd-border-strong: #d9e1eb;
  --pd-new: #5692ec;
  --pd-progress: #e5a953;
  --pd-progress-pale: #fff5e4;
  --pd-green: #226446;
  --pd-green-pale: #eaf6ef;
  --pd-purple: #705199;
  --pd-purple-pale: #f0ecf8;
  --pd-red: #a34032;
  --pd-amber-ink: #835916;
  --pd-red-pale: #fff0eb;
  --pd-shadow: #182b4308;
  --pd-shadow-strong: #182b431a;
  /* The object scan's map pins: the platform's glyph-pin shadow, so the things to click are not the faintest marks. */
  --pd-pin-shadow: #00000059;
  /* The object sheet's grip over a photo: a light bar with a soft shadow, legible on any photo in every theme. */
  --pd-sheet-handle: #ffffffeb;
  --pd-sheet-handle-shadow: 0 0 0 .5px #0000001f, 0 1px 6px #00000052;
  --pd-map-background: #f1f3ed;
  --pd-map-block: #e7eae5;
  --pd-map-river: #d9e9f3;
  --pd-map-park: #dcebdc;
  /* Drop target, map pin and road (folded from components/report-board/report-board.css). */
  --pd-drop-surface: #edf2fb;
  --pd-drop-edge: #9dbbf0;
  --pd-pin-ink: var(--pd-white);
  --pd-map-road: var(--pd-white);
  /* The object scan's category chips and map pins (designer F11): a tint and its ink in one rule, so
     the built themes rail measures the pair; green and blue alias the palette, orange (5.64:1),
     slate (7.60:1, Mobiliar), amber (6.32:1, Beleuchtung) and teal (6.60:1, Werkzeug) are the scan's own. */
  --pd-cat-green-surface: var(--pd-green-pale);
  --pd-cat-green-ink: var(--pd-green);
  --pd-cat-blue-surface: var(--pd-blue-pale);
  --pd-cat-blue-ink: var(--pd-blue);
  --pd-cat-orange-surface: #fff1e6;
  --pd-cat-orange-ink: #9a4a12;
  --pd-cat-slate-surface: #eef1f5;
  --pd-cat-slate-ink: #3f4d5f;
  --pd-cat-amber-surface: #fff4d6;
  --pd-cat-amber-ink: #7a5200;
  --pd-cat-teal-surface: #e2f4f1;
  --pd-cat-teal-ink: #0e5f57;
  /* The loan's confirmation (the platform's celebrate screen): one fill and its ink per direction,
     "Benutzen" green (5.34:1), "Zurückgeben" indigo (6.83:1); the disc reads the pair inverted. */
  --pd-celebrate-fill: #1d7a4a;
  --pd-celebrate-ink: #ffffff;
  --pd-return-fill: #4a4fb5;
  --pd-return-ink: #ffffff;
}

/* Preview colours follow the page in the dark themes. Drag ghosts inherit these custom properties. */
html:is([data-theme="dark"], [data-theme="contrast"]) .pd-app {
  --pd-white: var(--white);
  --pd-ink: var(--ink);
  --pd-muted: var(--muted);
  --pd-soft-ink: var(--muted);
  --pd-blue: var(--blue);
  --pd-blue-hover: var(--blue-hover);
  --pd-blue-pale: var(--pale-blue);
  --pd-surface: var(--paper);
  --pd-border: var(--line);
  --pd-border-strong: var(--line);
  --pd-new: var(--blue);
  --pd-progress: var(--amber);
  --pd-progress-pale: #352e20;
  --pd-green: #a6dcbf;
  --pd-green-pale: #203b30;
  --pd-purple: #d6baf2;
  --pd-purple-pale: #30283d;
  --pd-red: #ffb4a8;
  --pd-red-pale: #432723;
  --pd-amber-ink: #f1c471;
  --pd-shadow: #00000024;
  --pd-shadow-strong: #00000052;
  --pd-pin-shadow: #00000099;
  --pd-map-background: #1c2c25;
  --pd-map-block: #34483b;
  --pd-map-river: #233e4b;
  --pd-map-park: #294633;
  --pd-drop-surface: var(--pale-blue);
  --pd-drop-edge: var(--blue);
  --pd-pin-ink: #08110e;
  --pd-cat-orange-surface: #3a2a1e;
  --pd-cat-orange-ink: #ffb98a;
  --pd-cat-slate-surface: #263038;
  --pd-cat-slate-ink: #c3cfdb;
  --pd-cat-amber-surface: #3a3020;
  --pd-cat-amber-ink: #f1c471;
  --pd-cat-teal-surface: #1c3432;
  --pd-cat-teal-ink: #8fd9cd;
  --pd-celebrate-fill: #5fd39a;
  --pd-celebrate-ink: #0b1f14;
  --pd-return-fill: #a9adff;
  --pd-return-ink: #0f1030;
}

/* Strong boundaries supplement the written status labels in high contrast. */
html[data-theme="contrast"] .pd-app {
  --pd-border-strong: #fff;
  --pd-progress-pale: #000;
  --pd-green: #fff;
  --pd-green-pale: #000;
  --pd-purple: #fff;
  --pd-purple-pale: #000;
  --pd-red: #fff;
  --pd-red-pale: #000;
  --pd-amber-ink: #ffe66d;
  --pd-map-background: #000;
  --pd-map-block: #242424;
  --pd-map-river: #343434;
  --pd-map-park: #202020;
  --pd-map-road: #6b6b6b;
  --pd-cat-orange-surface: #000;
  --pd-cat-orange-ink: #fff;
  --pd-cat-slate-surface: #000;
  --pd-cat-slate-ink: #fff;
  --pd-cat-amber-surface: #000;
  --pd-cat-amber-ink: #fff;
  --pd-cat-teal-surface: #000;
  --pd-cat-teal-ink: #fff;
  --pd-celebrate-fill: #000;
  --pd-celebrate-ink: #fff;
  --pd-return-fill: #000;
  --pd-return-ink: #ffe66d;
}

/* The roadmap playground palette (folded from modules/report-board-demo/report-board-demo.css;
   light values from _archive/src/roadmap.css, dark and contrast from _archive/src/theme-demo.css). */
.rm-app {
  --rm-eyebrow: #607367;
  --rm-intro: #64746b;
  --rm-tag-ink: #4c6958;
  --rm-tag-border: #dce6dc;
  --rm-column-surface: #f5f7f3;
  --rm-column-border: #e7ebe4;
  --rm-dot-blue: #547bbe;
  --rm-dot-amber: #bd872d;
  --rm-dot-green: #508267;
  --rm-count-ink: #616e64;
  --rm-count-surface: #e9ede6;
  --rm-hint: #637466;
  --rm-card-surface: #fff;
  --rm-card-border: #dfe5dc;
  --rm-card-shadow: 0 3px 5px #20362a04;
  --rm-icon-surface: #edf2e9;
  --rm-status-ink: #75623f;
  --rm-status-surface: #f7f0e2;
  --rm-planned-ink: #4a64a0;
  --rm-planned-surface: #eef2fc;
  --rm-handle-ink: #7d8d80;
  --rm-handle-hover: #eef2ec;
  --rm-handle-hover-ink: #7d8d80;
  --rm-card-text: #647367;
  --rm-control-line: #edf0e9;
  --rm-control-ink: #516959;
  --rm-empty-ink: #647667;
  --rm-empty-border: #cfd9cb;
  --rm-footer-line: #e5eae1;
  --rm-footer-ink: #657265;
  --rm-local-dot: #6a8b6f;
  --rm-reset-ink: #526955;
  --rm-note-ink: #697469;
  --rm-drop-surface: #edf3e9;
  --rm-drop-edge: #a9c19f;
}

html:is([data-theme="dark"], [data-theme="contrast"]) .rm-app {
  --rm-card-surface: var(--white);
  --rm-card-border: var(--line);
  --rm-column-surface: var(--paper);
  --rm-column-border: var(--line);
  --rm-eyebrow: var(--muted);
  --rm-intro: var(--muted);
  --rm-tag-ink: var(--muted);
  --rm-hint: var(--muted);
  --rm-card-text: var(--muted);
  --rm-handle-ink: var(--muted);
  --rm-empty-ink: var(--muted);
  --rm-footer-ink: var(--muted);
  --rm-reset-ink: var(--muted);
  --rm-note-ink: var(--muted);
  --rm-tag-border: var(--line);
  --rm-control-line: var(--line);
  --rm-empty-border: var(--line);
  --rm-footer-line: var(--line);
  --rm-count-surface: var(--mint);
  --rm-icon-surface: var(--mint);
  --rm-count-ink: var(--ink);
  --rm-status-surface: #352e20;
  --rm-status-ink: #f1c471;
  --rm-planned-surface: var(--pale-blue);
  --rm-planned-ink: var(--blue);
  --rm-dot-blue: var(--blue);
  --rm-dot-amber: var(--amber);
  --rm-dot-green: var(--green);
  --rm-local-dot: var(--green);
  --rm-handle-hover: var(--pale-blue);
  --rm-handle-hover-ink: var(--blue);
  --rm-control-ink: var(--ink);
  --rm-drop-surface: var(--pale-blue);
  --rm-drop-edge: var(--blue);
}

/* Forced colours that no single component owns. A component's own rules live in its stylesheet. */
@media (forced-colors: active) {
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight !important;
  }
}