/*!
 * DHCW Single Record Design System — dark-mode token overrides (load AFTER single-record.css)
 * v0.3.0 · generated by packages/web/build.mjs · do not edit by hand.
 * Licence: MIT. Roboto is embedded under the Apache 2.0 licence.
 */

/* ═══ tokens (dark) ═══════════════════════════════════════════════ */
/**
 * Do not edit directly, this file was auto-generated.
 */

[data-theme="dark"] {
  --color-blue-50: #f4f5f8; /** Default page background (light mode) */
  --color-blue-100: #eceef3;
  --color-blue-200: #d4d8e2;
  --color-blue-300: #aab1c6;
  --color-blue-400: #828dac; /** Interactive/Disabled — semantic anchor */
  --color-blue-500: #5c6991;
  --color-blue-600: #4c72ae;
  --color-blue-700: #3d6199;
  --color-blue-800: #325083; /** Brand primary (light mode) */
  --color-blue-850: #2c3e72; /** DHCW organisational navy. Carried from the DHCW Figma primitives, where it is the corporate blue used for application chrome. White text on it is 10.3:1 (AAA). Not the Single Record brand primary — that is Blue/800. */
  --color-blue-900: #1e3050;
  --color-cyan-50: #f4fafc;
  --color-cyan-100: #ebf5fa;
  --color-cyan-300: #d6eaf2;
  --color-cyan-400: #afd4e5; /** Interactive/Link in dark mode */
  --color-cyan-500: #8dc0da;
  --color-cyan-600: #71accd;
  --color-cyan-700: #12a3c9; /** Brand secondary + Border/Focus (both modes) */
  --color-cyan-800: #0d8bad;
  --color-cyan-850: #0c7b99; /** Surface/Small Cards in dark mode */
  --color-cyan-900: #0a6a84;
  --color-navy-100: #cdcfd6;
  --color-navy-300: #9ea1af; /** Border/Disabled, Text/Disabled (dark) */
  --color-navy-500: #707488; /** Text/Disabled in light mode */
  --color-navy-700: #464c64;
  --color-navy-900: #1b294a;
  --color-red-50: #fef3f2;
  --color-red-100: #fcdbd9;
  --color-red-200: #f9b5b1;
  --color-red-300: #f48b85;
  --color-red-400: #ec5e56;
  --color-red-500: #e03a31;
  --color-red-600: #d5281b;
  --color-red-700: #b32014;
  --color-red-800: #8b190f;
  --color-red-900: #5f110a;
  --color-green-50: #f0faf4;
  --color-green-100: #d9efe5;
  --color-green-200: #aeddc9;
  --color-green-300: #7bcaaa;
  --color-green-400: #4ab88b;
  --color-green-500: #1fa66d;
  --color-green-600: #007f3b;
  --color-green-700: #006630;
  --color-green-800: #004d24;
  --color-green-900: #003319;
  --color-yellow-50: #fffaeb;
  --color-yellow-100: #fdf3d7;
  --color-yellow-200: #fde8ab;
  --color-yellow-300: #fbd97f;
  --color-yellow-400: #face62;
  --color-yellow-500: #f8ca4d;
  --color-yellow-600: #b47800;
  --color-yellow-700: #8a5a00; /** Warning banner/pill text colour */
  --color-yellow-800: #6b4400;
  --color-yellow-900: #4a3000; /** Darkest warning text on light surfaces */
  --color-info-blue-50: #eef5fc;
  --color-info-blue-100: #d6e8f5;
  --color-info-blue-200: #aecce8;
  --color-info-blue-300: #7eb0d9;
  --color-info-blue-400: #4e95ca;
  --color-info-blue-500: #267ab8;
  --color-info-blue-600: #0d62a3; /** Interactive/Primary (dark mode) */
  --color-info-blue-700: #005aa8; /** Interactive/Link (light), Status/Info */
  --color-info-blue-800: #004483; /** Interactive/Primary Hover (dark mode) */
  --color-info-blue-900: #002e5c;
  --color-grey-50: #f7fafa; /** Lightest neutral wash */
  --color-grey-100: #f0f4f5; /** Grey background. NHS grey-5. */
  --color-grey-200: #d8dde0; /** Default borders. NHS grey-4. */
  --color-grey-300: #c6cdd1; /** Subtle dividers, disabled fills (1.6:1) */
  --color-grey-400: #aeb7bd; /** Borders, dividers — non-text (2.0:1). NHS grey-3. */
  --color-grey-500: #768692; /** Muted/placeholder fill, disabled text, icons, strong borders (3.75:1 — passes 3:1 non-text; below 4.5:1 for body text). NHS grey-2. */
  --color-grey-600: #4c6272; /** Secondary/hint text (6.4:1 — AA). NHS grey-1. Accessible placeholder-text value. */
  --color-grey-700: #3b4e5b; /** Headings on grey surfaces (8.7:1) */
  --color-grey-800: #2c3a44; /** Strong text on tinted surfaces (11.7:1) */
  --color-grey-900: #212b32; /** Primary text (14.4:1 on white) */
  --color-white-default: #ffffff; /** Card and panel surfaces in light mode; Text/Inverse on saturated fills */
  --color-border-subtle: #f0f4f5; /** Ultra-light border for row dividers and internal table separators. Use only on white or near-white backgrounds where Border/Default would be too prominent. Do not use as the only structural indicator on a surface. */
  --color-border-default: #d8dde0; /** Standard border for inputs, cards, and section dividers. */
  --color-border-strong: #768692; /** The boundary of a UI component — checkbox and radio at rest, switch track on hover, sub-tab pill outline. 3.75:1 on white and 3.44:1 on the page background, clearing the 3:1 of WCAG 2.2 SC 1.4.11. Was Grey/600 (6.37:1) until 2026-09-08. Not a text colour. Kept in step with sr.color.border.strong by the build — see the border-token divergence check in packages/tokens/build.js. */
  --color-border-focus: #0d8bad; /** Focus ring colour — Cyan/800 (DDR-025, amending DDR-006). Applied to all interactive elements on keyboard focus. Always paired with Border/Width/Strong (2px) and an inner gap ring. Kept in step with sr.color.border.focus by hand: this token and the sr-prefixed one are the known duplication awaiting a token-structure decision. */
  --sr-color-interactive-primary: #0d62a3; /** Dark-mode brand primary. Info-blue/600 — replaces the prior cyan-based primary for better contrast with white text and a calmer hue on dark surfaces. */
  --sr-color-interactive-primary-hover: #004483; /** Hover step for primary in dark mode. */
  --sr-color-interactive-secondary: #aab1c6; /** Muted blue for secondary interactive elements on dark. */
  --sr-color-interactive-link: #afd4e5; /** Soft cyan — readable as inline link text on dark backgrounds. */
  --sr-color-interactive-destructive: #d5281b; /** Unchanged across modes. */
  --sr-color-interactive-disabled: #828dac; /** Same primitive as light mode — visually correct on dark surfaces. */
  --sr-color-interactive-on-accent: #7eb0d9; /** Info-blue/300 — the light counterpart to dark mode's interactive/primary (info-blue/600), so the hue family holds across states. 5.71:1 on surface/accent, where interactive/primary itself is 2.07:1. */
  --sr-color-interactive-on-accent-hover: #aecce8; /** Info-blue/200, 7.91:1 on surface/accent. Hover goes LIGHTER here, the opposite direction to light mode, because the surface underneath is dark. */
  --sr-color-surface-background: #1b294a; /** Main page background in dark mode. */
  --sr-color-surface-small-cards: #0c7b99; /** A small card that carries TEXT ONLY and sits inside a section card. The teal is deliberate and is what Figma has always bound (every Stat Card variant): it makes a small card read as a distinct plane against the navy section card at 2.70:1, where matching section-cards left it at 1.00:1 and invisible. DDR-033 restores it after DDR-026 re-pointed it to Blue/900. Cyan/850 is mid-luminance, so NOTHING reads on it except white (4.87:1): text/secondary is 3.56:1, every border is under 2:1, and interactive/primary is 1.31:1. That is why this surface is for text only — a control, border, link or button on it cannot be made to pass. Those belong on surface/section-cards. */
  --sr-color-surface-section-cards: #1e3050; /** Primary background for card sections in modular layout. */
  --sr-color-surface-accent: #1e3050; /** Deep blue for accent / highlighted areas. */
  --sr-color-surface-subtle: #464c64; /** Subtle section background — table rows, inactive tabs. */
  --sr-color-text-primary: #ffffff; /** Primary text on dark — 13.8:1 on navy-900 (AAA). */
  --sr-color-text-secondary: #d8dde0; /** Secondary text on dark. */
  --sr-color-text-inverse: #212b32; /** Text on light elements within a dark-mode interface. It flips with the mode by design — which is why a saturated fill, which does not flip, must use text/on-fill instead. */
  --sr-color-text-on-fill: #ffffff; /** White, same as light mode, and deliberately NOT flipped. A primary or destructive button is saturated in both modes, so its label stays white: 6.38:1 on interactive/primary and 5.06:1 on interactive/destructive here. */
  --sr-color-text-disabled: #9ea1af; /** Disabled text on dark surfaces. */
  --sr-color-border-subtle: #464c64; /** Subtle dividers on dark surfaces. */
  --sr-color-border-default: #707488; /** Standard borders on dark surfaces. */
  --sr-color-border-strong: #9ea1af; /** High-contrast borders on dark surfaces. */
  --sr-color-border-focus: #0d8bad; /** Focus ring — Cyan/800 in both modes (DDR-025, amending DDR-006). Same primitive as light mode. Dark mode is why the stop is 800 and not darker: on navy.900 Cyan/800 is 3.63:1 while Cyan/850 is 2.95:1. */
  --sr-color-border-disabled: #9ea1af;
  --sr-color-brand-accent: #12a3c9; /** Same primitive as light mode — cyan-700 used purely for visual interest, not as a surface requiring text. */
  --sr-color-status-critical: #b32014; /** Red/700 — matched to light mode; status surfaces stay light in dark mode, so the darker red keeps AA contrast. */
  --sr-color-status-critical-surface: #fef3f2; /** Light status surface kept across modes — banners switch to light fills in dark mode for legibility against the bright status colour. Tracks light mode's move from Red/100 to Red/50. */
  --sr-color-status-success: #006630; /** Green/700 — matched to light mode; status surfaces stay light in dark mode. */
  --sr-color-status-success-surface: #f0faf4;
  --sr-color-status-warning: #f8ca4d;
  --sr-color-status-warning-surface: #fffaeb;
  --sr-color-status-info: #005aa8;
  --sr-color-status-info-surface: #eef5fc;
  --sr-icon-size-xs: 16px; /** 16px — inline icons within dense content */
  --sr-icon-size-sm: 20px; /** 20px — standard inline icons */
  --sr-icon-size-md: 24px; /** 24px — default icon size, matching the source grid 1:1 */
  --sr-icon-size-lg: 32px; /** 32px — prominent icons, empty states */
  --sr-icon-stroke: 1; /** 1px at every size (DDR-023). There is deliberately no per-size variant. */
  --sr-icon-color-default: #ffffff; /** Default icon colour — matches primary text */
  --sr-icon-color-subtle: #d8dde0; /** Subdued icon — matches secondary text */
  --sr-icon-color-inverse: #212b32; /** Icon on dark or coloured surfaces */
  --sr-icon-color-interactive: #0d62a3; /** Interactive icon (clickable, hoverable) */
  --sr-icon-color-critical: #b32014; /** Critical / error state icon */
  --sr-icon-color-warning: #f8ca4d; /** Warning state icon */
  --sr-icon-color-success: #006630; /** Success / confirmed state icon */
  --sr-icon-color-info: #005aa8; /** Informational icon */
  --space-0: 0px; /** Explicit zero */
  --space-1: 4px; /** Icon padding, micro gaps */
  --space-2: 8px; /** Tight component internals */
  --space-3: 12px; /** Compact form elements */
  --space-4: 16px; /** Default internal padding */
  --space-5: 20px;
  --space-6: 24px; /** Section spacing within panels */
  --space-8: 32px; /** Component separation */
  --space-10: 40px;
  --space-12: 48px; /** Section breaks */
  --space-16: 64px; /** Major layout sections */
  --space-20: 80px; /** Page-level vertical rhythm */
  --space-24: 96px;
  --font-family-primary: Roboto; /** Primary UI typeface */
  --font-family-fallback: Arial,sans-serif; /** System fallback stack */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-36: 36px;
  --font-line-height-16: 16px;
  --font-line-height-20: 20px;
  --font-line-height-24: 24px;
  --font-line-height-28: 28px;
  --font-line-height-32: 32px;
  --font-line-height-36: 36px;
  --font-line-height-44: 44px;
  --font-letter-spacing-default: 0px; /** No additional tracking — body text and headings */
  --font-letter-spacing-wide: 0.3px; /** Expanded tracking — labels and UI controls */
  --font-letter-spacing-caption: 0.2px; /** Gentle expansion — captions and supporting text */
  --icon-size-xs: 16px; /** Smallest inline icon — within dense content such as table cells */
  --icon-size-sm: 20px; /** Small inline icon — standard inline usage */
  --icon-size-md: 24px; /** Default icon size. Matches the 24x24 source grid 1:1 */
  --icon-size-lg: 32px; /** Large icon — prominent placements and empty states */
  --icon-stroke: 1; /** 1px, at every size. DDR-023: Lucide ships 2px and Single Record overrides it globally. Do NOT vary stroke by size — this token previously carried a 2 'default' and a 1.75 'dense' pair that no icon has ever used. Every SVG in foundations/iconography/svg/ is stroke-width 1, and npm run check:icons fails on any that is not. */
  --icon-variant-outline: outline; /** Default variant for all icons. Stroke only, no fill. */
  --icon-variant-filled: filled; /** Reserved for navigation active states only. Filled variants are not assigned speculatively — each must be explicitly required by a navigation component. A mark that needs a second colour is a component, not an icon (DDR-027). */
  --spacing-component-xs: 4px; /** Icon-only buttons, tight badges */
  --spacing-component-sm: 8px; /** Compact inputs, table cells */
  --spacing-component-md: 16px; /** Default padding for most components */
  --spacing-component-lg: 24px; /** Panels, cards */
  --spacing-component-xl: 32px; /** Large containers */
  --spacing-form-field-gap: 24px; /** Vertical gap between form fields */
  --spacing-form-label-gap: 8px; /** Gap between label and input */
  --spacing-form-hint-gap: 4px; /** Gap between hint text and input */
  --spacing-form-error-gap: 4px; /** Gap between error message and input */
  --spacing-form-group-gap: 32px; /** Gap between field groups / fieldsets */
  --spacing-layout-xs: 16px; /** Column gutters (mobile) */
  --spacing-layout-sm: 24px; /** Column gutters (tablet) */
  --spacing-layout-md: 32px; /** Column gutters (desktop) */
  --spacing-layout-section: 48px; /** Between page sections */
  --spacing-layout-page: 64px; /** Page padding / top-level margins */
  --breakpoint-mobile-max: 767px; /** Maximum width for mobile styles. Use: @media (max-width: 767px) */
  --breakpoint-tablet-min: 768px; /** Minimum width for tablet styles. Use: @media (min-width: 768px) */
  --breakpoint-desktop-min: 1024px; /** Minimum width for desktop styles and desktop typography tokens. Use: @media (min-width: 1024px) */
  --breakpoint-large-min: 1280px; /** Minimum width for large desktop layouts. Use: @media (min-width: 1280px) */
  --breakpoint-xlarge-min: 1440px; /** Minimum width for extra-large desktop layouts. Use: @media (min-width: 1440px) */
  --border-width-1: 1px; /** Global: raw 1px border width. */
  --border-width-2: 2px; /** Global: raw 2px border width. */
  --border-width-default: 1px; /** Standard 1px border for inputs, cards, dividers, and section edges. */
  --border-width-strong: 2px; /** Emphasis border for active states, selected rows, and focus ring outer stroke. */
  --radius-0: 0px; /** Global: no rounding. */
  --radius-2: 2px; /** Global: minimal rounding. */
  --radius-4: 4px; /** Global: standard rounding. */
  --radius-8: 8px; /** Global: prominent rounding. */
  --radius-9999: 9999px; /** Global: pill / full-round. */
  --radius-none: 0px; /** No rounding. Use for tables, data grids, full-bleed containers, elements that must butt against screen edges or adjacent cells. */
  --radius-sm: 2px; /** Subtle rounding. Use for form inputs, text areas, select controls, inline tags, small badges, and chips. */
  --radius-md: 4px; /** Standard rounding. Use for buttons, cards, panels, notification banners, and tooltips. Default for most interactive components. */
  --radius-lg: 8px; /** Prominent rounding. Use for modals, side drawers, floating menus, and large overlay surfaces. */
  --radius-full: 9999px; /** Pill shape. Use for status chips, avatar rings, toggle switches, and search input end-caps. Not appropriate for rectangular content containers. */
  --elevation-raised: 0 1px 4px rgba(27, 41, 74, 0.12); /** Cards and panels: a gentle lift from the page surface. Use only where a border alone is insufficient to separate a surface from its background, for example a white card on a near-white page. Also used by the patient banner and the navigation sidebar. */
  --elevation-overlay: 0 4px 16px rgba(27, 41, 74, 0.18); /** All floating layers: modals, side drawers, dropdown menus and tooltips. The deeper shadow communicates that the surface sits above the page rather than on it. Never use the raised step for a floating layer — a card-weight shadow reads flat against a modal's own backdrop. */
  --size-touch-24: 24px; /** Global: WCAG 2.2 AA minimum (SC 2.5.8). Requires ≥10px inactive spacing on all sides. */
  --size-touch-32: 32px; /** Global: desktop compact target. Desktop mouse contexts only. */
  --size-touch-44: 44px; /** Global: WCAG 2.2 AAA (SC 2.5.5). Required for all touch interfaces. */
  --size-logo-xs: 24px; /** Absolute minimum. Reserved for compact icon-only usage in dense UI. */
  --size-logo-sm: 32px; /** Small — icon in compact placement, full logo in footers. */
  --size-logo-md: 48px; /** Standard — default for both icon and full logo in primary UI. */
  --size-logo-lg: 64px; /** Large — prominent full logo placement. */
  --size-logo-xl: 80px; /** Extra large — hero areas and splash screens. */
  --size-logo-2xl: 96px; /** Maximum — print, marketing, and full-bleed digital layouts. */
  --size-logo-icon-default: 32px; /** Icon in standard UI contexts: headers, navigation, app chrome. → 32px */
  --size-logo-icon-compact: 24px; /** Icon in dense UI: breadcrumbs, chips, inline context labels. → 24px */
  --size-logo-icon-prominent: 48px; /** Icon in hero areas and authentication screens. → 48px */
  --size-logo-full-default: 48px; /** Full lockup in page headers and primary placement. → 48px */
  --size-logo-full-compact: 32px; /** Full lockup in footers and secondary placement. → 32px */
  --size-logo-full-prominent: 64px; /** Full lockup in splash screens, print, and marketing. → 64px */
  --touch-default: 44px; /** 44px. WCAG 2.2 AAA (SC 2.5.5). REQUIRED for all MAUI (touch) interactive elements — no exceptions. Strongly recommended as the default for Blazor desktop. Use this unless a compact variant is explicitly justified. */
  --touch-compact: 32px; /** 32px. Desktop (Blazor) only — never use on MAUI. Permitted for secondary actions in genuinely dense layouts: row-level action icons, inline icon buttons in data tables. Requires documented rationale in the component spec. Must not be used for primary or destructive actions. */
  --touch-minimum: 24px; /** 24px. WCAG 2.2 AA floor (SC 2.5.8) — only valid with the spacing exception: the target must have ≥10px of inactive space on all sides (total interactive area ≥44px). Desktop only. Absolute last resort for extreme-density contexts such as icon-only action columns in data grids. Document the spacing justification in the component spec. */
  --logo-icon-size: 32px; /** Controls the height (and equal width) of all Logos component icon variants (Type=Icon). Default: 32px. Override at instance level by referencing a different Size/Logo/Icon/* alias token. */
  --logo-full-height: 48px; /** Controls the height of all Logos component full lockup variants (Type=Full). Width scales proportionally per brand aspect ratio. Default: 48px. Override at instance level by referencing a different Size/Logo/Full/* alias token. */
}