/* ============================================================================
   Design tokens — the single source of truth for every custom property
   ----------------------------------------------------------------------------
   This file declares custom properties and nothing else. No component rules,
   no element rules, no classes. That constraint is what makes it safe to sit
   near the top of the cascade: a file whose only selectors carry variables
   cannot change any component's cascade outcome.

   It is also what ``scripts/check_css_tokens.py`` enforces (rule R3): no
   other stylesheet may declare a custom property on :root / html / body /
   [data-theme]. Component-scoped declarations (``.u-density-compact {
   --surface-padding: ... }``) stay legal — that is how density is re-pointed.

   Load position: third, after the Pico variant and the per-request colour
   overrides, before every first-party stylesheet. See templates/base.html.

   Tier order inside this file is load-bearing:

     :root                              base values
     [data-theme="dark"]                same specificity, later source wins
     :root[data-theme="high-contrast"]  (0,2,0) — outranks the per-request
                                        colour-override block, which is also
                                        (0,2,0) but loads earlier, so operator
                                        colours can never degrade accessibility
                                        mode. This is why the high-contrast
                                        tier needs no !important.
   ============================================================================ */

:root {
  /* ---- Typeface stacks and status palette ---- */
  /* Override Pico's font stacks. Pico's --pico-font-family resolves
     to --pico-font-family-sans-serif by default, so html/body/forms
     all inherit Hanken Grotesk via the cascade. */
  --pico-font-family-sans-serif:
    "Hanken Grotesk",
    system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --pico-font-family-monospace:
    "JetBrains Mono",
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --pico-font-family: var(--pico-font-family-sans-serif);

  /* Display family — applied to h1-h3. Editorial serif at large sizes. */
  --font-family-display:
    "Instrument Serif",
    Georgia, "Times New Roman", "Liberation Serif", serif;

  /* Logo family — Instrument Serif is too thin for a wordmark at 28px;
     Fraunces carries weight and warmth at small sizes via its
     optical-size axis. */
  --font-family-logo:
    "Fraunces",
    Georgia, "Times New Roman", "Liberation Serif", serif;

  /* Subtle weight bump for body text. Variable font handles this for
     free; 420 lands between regular and medium and reads cleaner on
     light backgrounds than the default 400. */
  --pico-font-weight: 420;

  /* Heading face and weight, re-pointable per container. .u-density-compact
     swaps both for the UI sans at 600; everything else inherits the
     editorial serif. Instrument Serif ships only weight 400, so asking for
     more here would get synthetic bold rather than a heavier cut. */
  --font-heading: var(--font-family-display);
  --weight-heading: 400;
  --heading-tracking: -0.015em;

  /* Semantic status palette for soft badges (filled tint + readable text).
     Light values are AA on their own tint; the [data-theme="dark"] block
     below overrides them with dark-surface-appropriate tints. */
  --status-success-bg: #d4edda;
  --status-success-text: #155724;
  --status-warning-bg: #fff3cd;
  --status-warning-text: #856404;
  --status-danger-bg: #f8d7da;
  --status-danger-text: #721c24;
  --status-orange-bg: #ffe5d0;
  --status-orange-text: #7c3d00;
  --status-info-bg: #d1ecf1;
  --status-info-text: #0c5460;
  --status-neutral-bg: #e2e3e5;
  --status-neutral-text: #383d41;

  /* ---- Scale, semantic colour, component and layout tokens ---- */
  /* Semantic spacing scale extending Pico */
  --space-xs: calc(var(--pico-spacing) * 0.25);  /* 4px */
  --space-sm: calc(var(--pico-spacing) * 0.5);   /* 8px */
  --space-md: var(--pico-spacing);               /* 16px */
  --space-lg: calc(var(--pico-spacing) * 1.5);  /* 24px */
  --space-xl: calc(var(--pico-spacing) * 2);    /* 32px */
  --space-2xl: calc(var(--pico-spacing) * 3);   /* 48px */

  /* Radius scale. Stated in px, not rem: a corner is geometry, and Pico's
     root font-size is fluid, so a rem-based radius would grow with the type
     scale. Deriving from --pico-border-radius does not work either — it is
     0.25rem, and Pico re-scopes it to 5rem inside [role=search].

     The high-contrast arm zeroes xs..pill, which is what lets rounding
     collapse through the tokens instead of through a hand-kept selector
     list. --radius-circle stays 50% there: a round control whose function
     depends on being round must not become a square. */
  --radius-xs: 4px;      /* inline chips in dense tables, code-copy buttons */
  --radius-sm: 6px;      /* inputs, small buttons, table cells */
  --radius-md: 8px;      /* nested surfaces: stat tiles, rows, tab panels */
  --radius-lg: 12px;     /* top-level cards, articles, panels */
  --radius-xl: 16px;     /* page-header hero, dialogs, hub sections */
  --radius-pill: 999px;  /* fully round chips and status pills */
  --radius-circle: 50%;  /* icon discs, avatars, status dots, close buttons */

  /* Surface rhythm. The --space-* scale above says which sizes exist; these
     say which size to use at which nesting level, so a card in the admin
     panel and a card in the user area agree without either naming a value:

       L0  between top-level page sections   --space-2xl / --space-xl ≤768px
       L1  padding inside a surface          --surface-padding
       L2  between blocks inside a surface   --surface-gap
       L3  label <-> control, chip gaps      --space-sm
       L4  inline hairline gaps              --space-xs

     Two constraints keep it self-checking: never reuse a step at adjacent
     levels, and never skip more than one step going inward. Density is then
     a container re-pointing L1/L2 rather than a second set of components —
     see .u-density-compact in global.css. */
  --surface-padding: var(--space-lg);
  --surface-gap: var(--space-md);
  --row-padding-block: var(--space-sm);

  /* Depth. One rule: border is structure, shadow is elevation, and no
     surface gets both at full strength. Keeping all three tiers here means
     the dark and high-contrast arms are three lines rather than a sweep. */
  --border-width-hairline: 1px;
  --border-width-strong: 2px;
  --elev-0: none;
  --elev-1: var(--atm-card-shadow);        /* resting surface */
  --elev-2: var(--atm-card-shadow-hover);  /* hover / raised */
  --elev-3: 0 24px 60px -12px color-mix(in srgb, var(--atm-shadow-ink) 32%, transparent);

  /* Typography scale */
  --text-2xs: 0.6875rem; /* 11px — eyebrows and legends only, never a
                            meaning-bearing label */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2rem;      /* 32px */
  --text-4xl: 2.5rem;    /* 40px */

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* Semantic color system extending Pico */
  --tool-primary: var(--pico-form-element-valid-border-color);
  --tool-primary-hover: var(--pico-form-element-valid-active-border-color);
  --tool-secondary: var(--pico-ins-color);
  --chatbot-primary: var(--pico-primary);
  --chatbot-primary-hover: var(--pico-primary-hover);
  --chatbot-secondary: var(--pico-primary-hover);

  /* RGB values for gradients.
     --pico-primary-rgb is injected per request by compute_color_overrides
     in uniaikitutilities/color_utils.py so it tracks the active Pico
     variant (default/jade/pumpkin) and any admin color override.
     Consumers must use a `var(--pico-primary-rgb, 13, 110, 253)`
     fallback — a hardcoded value here would not track theme tinting
     on the rare path that bypasses templates. */
  --tool-primary-rgb: 72, 187, 120;

  /* Component-specific tokens */
  --pill-bg: var(--pico-secondary-background);
  --pill-color: var(--pico-secondary-inverse);
  --pill-padding: var(--space-xs) var(--space-sm);
  --pill-border-radius: var(--radius-pill);

  /* Row-action buttons: the small buttons that trail a list row (user cards,
     folder rows, generic .row-actions). One size for one concept — a row
     action that inherits the page-button scale reads as a page action. */
  --row-action-padding: var(--space-xs) var(--space-md);
  --row-action-font-size: var(--text-sm);

  /* Card system tokens. A generic surface gets the hairline: a 2px border
     on every card is what makes a page read as heavy. The strong width is
     reserved for the catalogue tiles below, where the border is part of the
     product's identity rather than a container edge. */
  --card-padding: var(--surface-padding);
  --card-border-radius: var(--radius-lg);
  --card-border-width: var(--border-width-hairline);
  --card-shadow: var(--elev-1);
  --card-shadow-hover: var(--elev-2);

  /* Warm ink hairline used by .tool's outer layer to draw a 1.5px ring
     around the clip-path silhouette. The warm gray is mixed with the
     active primary so the painterly ring harmonises with jade / blue /
     pumpkin deployments instead of always reading as amber-brown. */
  --ink-border-color: color-mix(in oklab, #5A4A38 75%, rgb(var(--pico-primary-rgb, 13, 110, 253)) 25%);

  /* Tool card specific */
  --tool-card-padding: var(--card-padding);
  --tool-card-border: var(--border-width-strong) solid var(--tool-primary);
  --tool-card-border-hover: var(--border-width-strong) solid var(--tool-primary-hover);
  --tool-icon-size: 2.5rem;

  /* Chatbot card specific */
  --chatbot-card-padding: var(--card-padding);
  --chatbot-card-border: var(--border-width-strong) solid var(--chatbot-primary);
  --chatbot-card-border-hover: var(--border-width-strong) solid var(--chatbot-primary-hover);

  /* Form tokens */
  --form-separator-margin: var(--space-md) 0;
  --form-group-gap: var(--space-md);
  --input-padding: var(--space-sm) var(--space-md);

  /* Layout tokens */
  --container-max-width: 1200px;
  --grid-gap: var(--space-lg);
  --grid-min-column-width: 280px;

  /* Animation tokens */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index scale. The low tier (100-600) layers in-page chrome; the overlay
     tier (9998+) sits above all page content and any third-party sticky
     element. Every overlay consumes a token via `var(--z-*, <fallback>)` where
     the fallback equals the token value, so stacking is correct even on a page
     that did not load this file. Order within the overlay tier is
     load-bearing: toasts/banners sit above decorative confetti, dialogs above
     toasts, and the guided tour above everything. */
  /* Floating action buttons (bug report, keyboard shortcuts) share one
     geometry so the shell can reserve exactly the strip they occupy. Both
     buttons sit at the same inline offset and differ only in block position,
     so the reserved strip is one inset plus one button. */
  --fab-inset: 1.5rem;
  --fab-size: 3rem;
  --fab-reserved-inline-size: calc(var(--fab-inset) + var(--fab-size));

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-overlay: 9998; /* decorative full-screen layers (confetti) */
  --z-toast: 9999; /* transient messages: banners, toasts, unlock, celebration */
  --z-dialog: 10000; /* modal/confirm backdrops, command palette, top progress bar */
  --z-tour: 10001; /* guided-tour spotlight — the very top */

  /* Accessible primary palette for prominent surfaces (active filter
     pills, floating help/bug buttons). Defaults satisfy WCAG AA 4.5:1
     for the project's jade theme in both color schemes; pumpkin/blue
     deployments can override these in custom CSS without touching
     component files. The pico-jade dark-mode primary (#00b478) only
     reaches 2.69:1 against white, which is why a fixed darker value
     is needed regardless of color scheme. */
  --accessible-primary-bg: #007a50;
  --accessible-primary-bg-hover: #005f3d;
  --accessible-primary-text: #fff;

  /* Legacy Pico token aliases for older component styles. */
  --spacing: var(--pico-spacing);
  --border-width: var(--pico-border-width);
  --background-color: var(--pico-background-color);
  --color: var(--pico-color);
  --muted-color: var(--pico-muted-color);
  --muted-border-color: var(--pico-muted-border-color);
  --primary: var(--pico-primary);
  --primary-hover: var(--pico-primary-hover);
  --primary-focus: var(--pico-primary-focus);
  --primary-inverse: var(--pico-primary-inverse);
  --secondary: var(--pico-secondary);
  --secondary-hover: var(--pico-secondary-hover);
  --secondary-focus: var(--pico-secondary-focus);
  --secondary-inverse: var(--pico-secondary-inverse);
  --contrast: var(--pico-contrast);
  --contrast-inverse: var(--pico-contrast-inverse);
  --card-background-color: var(--pico-card-background-color);
  --card-border-color: var(--pico-card-border-color);
  --card-sectioning-background-color: var(--pico-card-sectioning-background-color);
  --dropdown-hover-background-color: var(--pico-dropdown-hover-background-color);
  --code-background-color: var(--pico-code-background-color);

  /* ---- Ambient atmosphere surfaces ---- */
  --atm-blob-tint:         rgba(var(--pico-primary-rgb, 13, 110, 253), 0.10);
  --atm-blob-tint-soft:    rgba(var(--pico-primary-rgb, 13, 110, 253), 0.04);
  /* Painterly card-shadow ink: amber base nudged toward the active
     primary so blue / jade / pumpkin deployments each carry a tint
     that harmonises with the chosen accent — keeping the "afternoon
     light on paper" feel without clashing with cool themes. */
  --atm-shadow-ink:        color-mix(in oklab, rgb(82, 56, 28) 65%, rgb(var(--pico-primary-rgb, 13, 110, 253)) 35%);
  --atm-card-shadow:       0 8px 22px -8px color-mix(in srgb, var(--atm-shadow-ink) 18%, transparent);
  --atm-card-shadow-hover: 0 18px 40px -10px color-mix(in srgb, var(--atm-shadow-ink) 26%, transparent);
  --atm-icon-chip-bg:      rgba(var(--pico-primary-rgb, 13, 110, 253), 0.10);
  --atm-pattern-opacity:   0.10;
  --atm-surface-tint:      rgba(var(--pico-primary-rgb, 13, 110, 253), 0.04);
  --atm-divider-fill:      var(--pico-card-background-color);
  /* Paper-grain hue rotation — overridden per active primary in
     color_utils.py. Fallback 0deg keeps the original amber when the
     override pipeline is bypassed (e.g. management commands). */
  --atm-warm-hue-rotation: 0deg;

  /* ---- Favourite pill accent ---- */
  --pill-favorite-color: #ff9500;
  --pill-favorite-color-hover: color-mix(
    in srgb,
    var(--pill-favorite-color) 90%,
    black
  );
  --pill-favorite-text-color: #2b1800;

  /* ---- Risk-badge geometry and palette mapping ---- */
  /* Risk badge sizing */
  --risk-badge-padding: 0.4rem 0.75rem;
  --risk-badge-padding-sm: 0.3rem 0.6rem;
  --risk-badge-border-radius: 0.375rem;
  --risk-badge-border-radius-sm: 0.3rem;
  --risk-badge-font-size: 0.9rem;
  --risk-badge-font-size-sm: 0.85rem;
  --risk-badge-font-weight: 600;
  --risk-badge-spacing: 0.75rem;

  /* Risk category colors reuse the shared soft status palette so risk
     chips keep readable text on every supported theme. */
  --risk-unacceptable-bg: var(--status-danger-bg);
  --risk-unacceptable-text: var(--status-danger-text);
  --risk-high-bg: var(--status-orange-bg);
  --risk-high-text: var(--status-orange-text);
  --risk-limited-bg: var(--status-warning-bg);
  --risk-limited-text: var(--status-warning-text);
  --risk-minimal-bg: var(--status-success-bg);
  --risk-minimal-text: var(--status-success-text);
  --risk-undefined-bg: var(--status-neutral-bg);
  --risk-undefined-text: var(--status-neutral-text);

  /* Risk category colors - Data Protection */
  --dataprotection-high-bg: var(--status-danger-bg);
  --dataprotection-high-text: var(--status-danger-text);
  --dataprotection-medium-bg: var(--status-warning-bg);
  --dataprotection-medium-text: var(--status-warning-text);
  --dataprotection-low-bg: var(--status-success-bg);
  --dataprotection-low-text: var(--status-success-text);
  --dataprotection-undefined-bg: var(--status-neutral-bg);
  --dataprotection-undefined-text: var(--status-neutral-text);

  /* Risk category colors - Provider Data Risk */
  --provider-risk-high-bg: var(--status-danger-bg);
  --provider-risk-high-text: var(--status-danger-text);
  --provider-risk-medium-bg: var(--status-warning-bg);
  --provider-risk-medium-text: var(--status-warning-text);
  --provider-risk-low-bg: var(--status-success-bg);
  --provider-risk-low-text: var(--status-success-text);
  --provider-risk-undefined-bg: var(--status-neutral-bg);
  --provider-risk-undefined-text: var(--status-neutral-text);
}

/* ============================================================================
   Dark theme
   ----------------------------------------------------------------------------
   Deep oxblood-brown surfaces and warm-cream text rather than Pico's cool
   blue-charcoal. The primary accent still comes from the selected Pico
   variant, so operator colour overrides continue to apply here.
   ============================================================================ */

[data-theme="dark"] {
  /* ---- Surfaces, text and status palette ---- */
  --pico-background-color: #1F1A15;
  --pico-card-background-color: #2B2520;
  --pico-card-sectioning-background-color: #25201B;
  --pico-color: #F2EBE0;
  --pico-h1-color: #FBF6EE;
  --pico-h2-color: #F5EFE4;
  --pico-h3-color: #F0EADE;
  --pico-h4-color: #E8E1D3;
  --pico-h5-color: #DFD7C8;
  --pico-h6-color: #D6CDBD;
  --pico-heading-color: #F5EFE4;
  --pico-muted-color: #A39A8A;
  --pico-muted-border-color: #3A332C;
  --pico-card-border-color: #3A332C;
  --pico-code-background-color: #15110D;
  --pico-code-color: #E8C896;
  --pico-form-element-background-color: #25201B;
  --pico-form-element-border-color: #3A332C;
  --pico-form-element-color: #F2EBE0;
  /* Placeholder text is normal-size body text, so SC 1.4.3 applies at 4.5:1.
     Measured against both form-element backgrounds below (#25201B base,
     #2B2520 active): 5.13:1 and 4.81:1. */
  --pico-form-element-placeholder-color: #9A9081;
  --pico-form-element-active-background-color: #2B2520;
  --pico-form-element-disabled-background-color: #1F1A15;
  --pico-secondary-background: #3A332C;
  --pico-secondary-inverse: #F2EBE0;
  --pico-table-row-stripped-background-color: #25201B;
  --pico-table-border-color: #3A332C;
  --pico-dropdown-background-color: #2B2520;
  --pico-dropdown-border-color: #3A332C;
  --pico-blockquote-color: #C8BFAD;
  --pico-blockquote-border-color: #3A332C;

  /* Status palette — dark tints harmonised with the warm surfaces above,
     bright foreground text keeps AA contrast on the tinted background. */
  --status-success-bg: #1D3326;
  --status-success-text: #7EE0A6;
  --status-warning-bg: #3A3014;
  --status-warning-text: #F0C674;
  --status-danger-bg: #3A1D1F;
  --status-danger-text: #F2A3A8;
  --status-orange-bg: #3A2614;
  --status-orange-text: #F0B074;
  --status-info-bg: #14323A;
  --status-info-text: #82D4E6;
  --status-neutral-bg: #2E2A24;
  --status-neutral-text: #BCB4A6;
  color-scheme: dark;

  /* ---- Primary button hover ---- */
  /* Pico lightens the primary on hover in its dark schemes, and on the
     default, jade and fuchsia variants that lands white button text at
     4.4:1. Darkening instead keeps every variant's hovered button above
     6.7:1 against its inverse (SC 1.4.3); operator colour overrides are
     injected on :root[data-theme] and still win. */
  --pico-primary-hover-background: color-mix(in srgb, var(--pico-primary-background) 85%, #000);
  --pico-primary-hover-border: var(--pico-primary-hover-background);

  /* ---- Card borders and shadows ---- */
  /* Dark mode color overrides */
  --tool-border-color: var(--tool-secondary);
  --tool-border-hover: var(--tool-primary);
  --chatbot-border-color: var(--chatbot-secondary);
  --chatbot-border-hover: var(--chatbot-primary);
  --ink-border-color: color-mix(in oklab, #A09080 75%, rgb(var(--pico-primary-rgb, 13, 110, 253)) 25%);

  /* ---- Ambient atmosphere surfaces ---- */
  --atm-blob-tint:         rgba(var(--pico-primary-rgb, 13, 110, 253), 0.14);
  --atm-blob-tint-soft:    rgba(var(--pico-primary-rgb, 13, 110, 253), 0.06);
  /* Dark-mode shadow ink: black base with a small primary draw so the
     drop still casts a clear edge against the panel surface while
     picking up enough hue to harmonise with the active theme. */
  --atm-shadow-ink:        color-mix(in oklab, black 75%, rgb(var(--pico-primary-rgb, 13, 110, 253)) 25%);
  --atm-card-shadow:       0 8px 22px -8px color-mix(in srgb, var(--atm-shadow-ink) 45%, transparent);
  --atm-card-shadow-hover: 0 18px 40px -10px color-mix(in srgb, var(--atm-shadow-ink) 55%, transparent);
  --atm-pattern-opacity:   0.14;

  /* ---- Workflow SVG diagram nodes ---- */
  --workflow-svg-node-fill: #2b3444;
  --workflow-svg-node-stroke: #93a1b7;
  --workflow-svg-cluster-fill: #1a2130;
  --workflow-svg-cluster-stroke: #6f7b91;
  --workflow-svg-label-color: #eef2f7;
  --workflow-svg-edge-stroke: #9aa6bb;
  --workflow-svg-edge-label-fill: #13171f;
}

/* ============================================================================
   High-contrast theme
   ----------------------------------------------------------------------------
   Targets WCAG 2.2 AAA (7:1 body / 4.5:1 large text). The palette is
   deliberately tiny: pure #000, pure #fff, pure #ff0.

   Anything reading a Pico or project token gets high contrast for free.
   Components that layer their own colours opt in with the .hc-surface /
   .hc-surface-accent / .hc-chrome-label classes in high-contrast.css,
   which also owns the remaining selector-level fixes.
   ============================================================================ */

:root[data-theme="high-contrast"] {
  /* Lean on the variable wght axis of Hanken Grotesk for a heavier
     body stroke without loading another file. Instrument Serif is
     single-weight, so headlines use a touch tighter tracking instead. */
  --pico-font-weight: 540;

  /* Accessibility mode drops the editorial serif: a single-weight display
     face cannot carry the stroke contrast this theme is for. Sans at 700
     with neutral tracking is legible at every size on pure black. */
  --font-heading: var(--pico-font-family-sans-serif);
  --weight-heading: 700;
  --heading-tracking: 0;

  --pico-background-color: #000;
  --pico-color: #fff;
  --pico-h1-color: #fff;
  --pico-h2-color: #fff;
  --pico-h3-color: #fff;
  --pico-h4-color: #fff;
  --pico-h5-color: #fff;
  --pico-h6-color: #fff;
  --pico-heading-color: #fff;
  --pico-muted-color: #fff;
  --pico-muted-border-color: #fff;
  --pico-card-background-color: #000;
  --pico-card-border-color: #fff;
  --pico-card-sectioning-background-color: #000;
  --pico-card-box-shadow: none;
  --pico-box-shadow: none;
  --pico-form-element-background-color: #000;
  --pico-form-element-border-color: #fff;
  --pico-form-element-color: #fff;
  --pico-form-element-placeholder-color: #fff;
  --pico-form-element-focus-color: #ff0;
  --pico-form-element-active-background-color: #000;
  --pico-form-element-active-border-color: #ff0;
  --pico-form-element-disabled-background-color: #000;
  --pico-form-element-disabled-border-color: #fff;
  --pico-form-element-valid-border-color: #ff0;
  --pico-form-element-invalid-border-color: #ff0;
  --pico-primary: #ff0;
  --pico-primary-background: #ff0;
  --pico-primary-border: #ff0;
  --pico-primary-underline: #ff0;
  --pico-primary-hover: #fff;
  --pico-primary-hover-background: #fff;
  --pico-primary-hover-border: #fff;
  --pico-primary-hover-underline: #fff;
  --pico-primary-focus: #ff0;
  --pico-primary-inverse: #000;
  --pico-secondary: #fff;
  --pico-secondary-background: #000;
  --pico-secondary-border: #fff;
  --pico-secondary-hover: #ff0;
  --pico-secondary-hover-background: #000;
  --pico-secondary-hover-border: #ff0;
  --pico-secondary-focus: #ff0;
  --pico-secondary-inverse: #fff;
  --pico-contrast: #fff;
  --pico-contrast-background: #fff;
  --pico-contrast-border: #fff;
  --pico-contrast-inverse: #000;
  --pico-mark-background-color: #ff0;
  --pico-mark-color: #000;
  --pico-code-background-color: #000;
  --pico-code-color: #fff;
  --pico-blockquote-color: #fff;
  --pico-blockquote-border-color: #fff;
  --pico-table-border-color: #fff;
  --pico-table-row-stripped-background-color: #000;
  --pico-dropdown-background-color: #000;
  --pico-dropdown-border-color: #fff;
  --pico-dropdown-color: #fff;
  --pico-dropdown-hover-background-color: #ff0;
  --pico-switch-background-color: #000;
  --pico-switch-checked-background-color: #ff0;
  --pico-switch-color: #fff;
  --pico-range-border-color: #fff;
  --pico-range-active-border-color: #ff0;
  --pico-range-thumb-color: #ff0;
  --pico-range-thumb-active-color: #fff;
  --pico-accordion-border-color: #fff;
  --pico-accordion-active-summary-color: #ff0;
  --pico-tooltip-background-color: #ff0;
  --pico-tooltip-color: #000;
  /* Project-local vars used across cards.css / search.css / pills.css /
     atmosphere.css / favorites.css — each declared on :root in core.css
     and would otherwise survive HC mode unchanged. */
  --tool-primary: #ff0;
  --tool-primary-hover: #fff;
  --tool-primary-rgb: 255, 255, 0;
  /* Consumed as rgba(var(--pico-primary-rgb), α) for tints in atmosphere.css,
     chatbot.css and results.css. Left unset it resolves to the blue fallback,
     which is near-invisible on the black background. */
  --pico-primary-rgb: 255, 255, 0;
  --chatbot-primary: #ff0;
  --chatbot-primary-hover: #fff;
  --card-shadow: none;
  --card-shadow-hover: none;
  /* Depth is a shading cue, so it carries no information at this contrast
     level; the border does the work instead. */
  --elev-1: none;
  --elev-2: none;
  --elev-3: none;
  --border-width-hairline: 2px;
  --tool-card-border: 2px solid #fff;
  --pill-bg: #ff0;
  --pill-color: #000;
  --pill-border-radius: 0;
  --status-success-bg: #ff0;
  --status-success-text: #000;
  --status-warning-bg: #ff0;
  --status-warning-text: #000;
  --status-danger-bg: #000;
  --status-danger-text: #fff;
  --status-info-bg: #ff0;
  --status-info-text: #000;
  --status-neutral-bg: #000;
  --status-neutral-text: #fff;
  --accessible-primary-bg: #ff0;
  --accessible-primary-bg-hover: #fff;
  --accessible-primary-text: #000;
  --atm-icon-chip-bg: transparent;
  --atm-card-shadow: none;
  --atm-card-shadow-hover: none;
  --atm-pattern-opacity: 0;
  --atm-blob-tint: transparent;
  --atm-blob-tint-soft: transparent;
  /* Geometry — collapse rounding so anything reading a radius token
     resolves to a hard rectangle. --radius-circle deliberately survives:
     a round control (the message-close ×, the voice-toggle ring) reads as
     a different control once it is square. */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 0;
  --pico-border-radius: 0;
  /* Card hairline ring becomes pure white in HC mode so the silhouette
     stays unambiguous against the black background. */
  --ink-border-color: #fff;
  color-scheme: dark;

  /* Pico's stock del/ins colours (~#88382d / ~#26643b) fail AA on black. */
  --pico-del-color: #fff;
  --pico-ins-color: #ff0;
}

/* ============================================================================
   Forced-colours preference
   ----------------------------------------------------------------------------
   Users who ask the OS for more contrast without selecting the project's
   high-contrast theme get a thicker card hairline.
   ============================================================================ */

@media (prefers-contrast: more) {
  :root {
    /* Structure carries the emphasis a shadow cannot at this setting. */
    --border-width-hairline: 2px;
    --border-width-strong: 3px;
    --card-border-width: 3px;
    --elev-1: none;
    --elev-2: none;
    --elev-3: none;
    --pico-muted-color: var(--pico-color);
  }
}