/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --color-navy-50: #f2f7ff;
  --color-navy-100: #e4e8f0; /** Care navy tint. Icon tiles, the selected row, the secondary button's hover fill. */
  --color-navy-200: #c1d9ff;
  --color-navy-300: #99bffb;
  --color-navy-400: #81a6e0;
  --color-navy-500: #698dc5;
  --color-navy-600: #47699f; /** Text-safe on white, cream and the navy tint (4.5:1). */
  --color-navy-700: #335488; /** 7:1 on white and cream. */
  --color-navy-800: #214174;
  --color-navy-900: #082858; /** Care navy. Titles, header, table headers, the feature card, the focus ring. */
  --color-navy-950: #001c4a; /** Pressed state of navy fills. */
  --color-orange-50: #fff4f0;
  --color-orange-100: #fbe9de; /** Care orange tint. The takeaway band; the primary button's disabled fill is not this, see action.disabled. */
  --color-orange-200: #ffcab6;
  --color-orange-300: #ffa380;
  --color-orange-400: #ff763d;
  --color-orange-500: #e85808; /** Care orange. Large text (24 px, or 19 px bold), the short rule under titles, icons and borders on white. Never 16 px text, never white text on it. */
  --color-orange-600: #bb4400; /** Text-safe orange: 5.3:1 on white, 5.0:1 on cream, 4.5:1 on the orange tint; white text on it 5.3:1. The primary button fill. */
  --color-orange-700: #953400; /** Primary button hover; 7.6:1 on white. */
  --color-orange-800: #722600; /** Primary button pressed. */
  --color-orange-900: #551a00;
  --color-orange-950: #3a0f00;
  --color-sky-50: #eff8ff;
  --color-sky-100: #e3f3fb; /** Care sky tint. Information callouts, the Dispatched tag fill. */
  --color-sky-200: #afdfff;
  --color-sky-300: #72c8ff;
  --color-sky-400: #3caff1;
  --color-sky-500: #0090d0; /** Care sky. Kickers at 12 px bold and above are not large text, so kickers use 600. 500 is for rings, bars, icons and borders on white (3.6:1). */
  --color-sky-600: #0072a8; /** Care text sky: 5.3:1 on white, 4.9:1 on cream, 4.7:1 on the sky tint. Links, kickers, information text. */
  --color-sky-700: #005a84; /** Link hover; 7.5:1 on white. */
  --color-sky-800: #00476a;
  --color-sky-900: #00344f;
  --color-sky-950: #002236;
  --color-green-50: #e6fef1;
  --color-green-100: #e1f1ea; /** Care green tint. The Delivered tag fill, success callouts. */
  --color-green-200: #a8e9c8;
  --color-green-300: #72d5a7;
  --color-green-400: #58bb8f;
  --color-green-500: #2b946a; /** Care green. Tick icons and borders on white (3.8:1); not 16 px text. */
  --color-green-600: #007b53; /** Text-safe green: 5.3:1 on white, 5.0:1 on cream, 4.5:1 on the green tint. */
  --color-green-700: #006141;
  --color-green-800: #005035;
  --color-green-900: #003b26;
  --color-green-950: #002717;
  --color-gold-50: #fff5e6;
  --color-gold-100: #f5eddf; /** Care gold tint. Submitted, Waiting and Processing tag fills, the lead-time callout. */
  --color-gold-200: #f4d29b;
  --color-gold-300: #e8b459;
  --color-gold-400: #cd9b3e;
  --color-gold-500: #be8c2c; /** Care gold. 3.0:1 on white, so icons and borders on white only; it fails 3:1 on cream (2.8:1), so on the shell use 600. */
  --color-gold-600: #8f6400; /** Text-safe gold: 5.3:1 on white, 4.9:1 on cream, 4.5:1 on the gold tint. */
  --color-gold-700: #704e00;
  --color-gold-800: #583d00;
  --color-gold-900: #412c00;
  --color-gold-950: #2c1c00;
  --color-red-50: #fff4f2;
  --color-red-100: #ffe9e5; /** Error callout and Needs attention tag fill. */
  --color-red-200: #ffc8c0;
  --color-red-300: #ffa194;
  --color-red-400: #ff7264;
  --color-red-500: #e24a3f; /** Error icons and borders on white (4.0:1); not 16 px text. */
  --color-red-600: #ca322b; /** Error text: 5.3:1 on white, 4.9:1 on cream, 4.5:1 on the red tint. The error summary border, the invalid field border. */
  --color-red-700: #ac040c;
  --color-red-800: #810005;
  --color-red-900: #610003;
  --color-red-950: #430001;
  --color-teal-100: #ddedeb; /** Care teal tint. */
  --color-teal-500: #1e8a7e; /** Care teal. Non-text only (4.2:1 on white). */
  --color-teal-600: #00776c; /** Text-safe teal: 5.5:1 on white, 4.5:1 on the teal tint. */
  --color-plum-100: #eae4eb; /** Care plum tint. */
  --color-plum-500: #77507c; /** Care plum. Carries text on white and cream (6.5:1, 6.1:1); 5.2:1 on its own tint. */
  --color-neutral-500: #87909c; /** Control boundary grey: 3.2:1 on white, 3.0:1 on cream, so an input border on either ground meets 1.4.11. */
  --color-neutral-600: #656d78; /** Secondary text and placeholders: 5.2:1 on white, 4.9:1 on cream, 4.5:1 on the tints. */
  --color-neutral-white: #ffffff; /** Working surfaces: forms, tables, lists, cards. */
  --color-neutral-cream: #fbf7ee; /** Care cream. The shell, the sign-in screen, section bands. */
  --color-neutral-light: #f4f6f9; /** Panels and the disabled control fill. */
  --color-neutral-stripe: #eef2f6; /** Zebra rows; the Cancelled tag fill. */
  --color-neutral-border: #d9e1ea; /** Hairlines and card borders. Decorative: 1.3:1 on white, so never the only boundary of a control. */
  --color-neutral-bar-other: #c5d0db; /** De-emphasised chart categories. */
  --color-neutral-muted: #44546a; /** Care muted. Straps, help text and body text on cream (7.2:1). */
  --color-neutral-ink: #1b2a3a; /** Care ink. List and table text on white (14.6:1). */
  --focus-width: 3px;
  --focus-gap: 2px;
  --font-family-sans: Poppins, Arial, 'Helvetica Neue', Helvetica, sans-serif; /** Poppins 400 to 700, self-hosted by each consumer; the reference sheet loads it from fonts/poppins in this repository (SIL OFL 1.1). Arial is the fallback and is what a locked-down clinic PC shows before the font loads. */
  --font-family-mono: Consolas, Menlo, monospace; /** Order references, NHS numbers and PIP codes in tables, so digits align. */
  --font-weight-regular: 400;
  --font-weight-medium: 500; /** Field labels, table headers, tag labels. */
  --font-weight-semibold: 600; /** Buttons, headings, the kicker. */
  --font-weight-bold: 700; /** The page title, KPI numbers. */
  --font-size-xs: 0.75rem; /** 12 px. The kicker (bold, uppercase) and table metadata only. */
  --font-size-sm: 0.875rem; /** 14 px. Labels, captions, tag labels, dense table cells on the PC. */
  --font-size-md: 1rem; /** 16 px. Body, inputs, buttons, table cells on the phone. */
  --font-size-lg: 1.1875rem; /** 19 px. Lead paragraphs, card titles, the phone primary button label. */
  --font-size-xl: 1.4375rem; /** 23 px. Section headings. */
  --font-size-2xl: 1.75rem; /** 28 px. Page titles on the phone. */
  --font-size-3xl: 2.125rem; /** 34 px. Page titles on the PC. */
  --font-size-4xl: 2.5rem; /** 40 px. KPI numbers; the display ceiling. */
  --font-line-height-xs: 1.5;
  --font-line-height-sm: 1.5;
  --font-line-height-md: 1.5;
  --font-line-height-lg: 1.45;
  --font-line-height-xl: 1.35;
  --font-line-height-2xl: 1.3;
  --font-line-height-3xl: 1.2;
  --font-line-height-4xl: 1.15;
  --font-letter-spacing-kicker: 0.04em; /** Uppercase kickers. */
  --font-letter-spacing-display: -0.02em; /** 3xl and 4xl only. */
  --font-measure: 70ch; /** Maximum line length for prose (65 to 75ch). */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px; /** The minimum gap between adjacent targets. */
  --space-4: 16px; /** The phone side gutter and card padding. */
  --space-5: 20px;
  --space-6: 24px; /** PC card padding and the gap between form groups. */
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --radius-xs: 4px; /** Checkboxes, small chips. */
  --radius-sm: 6px; /** Status tags, table cells that need one. */
  --radius-md: 8px; /** Buttons, inputs, selects, the segmented control's inner items. */
  --radius-lg: 12px; /** The segmented control, callouts, icon tiles. */
  --radius-xl: 14px; /** Cards, the feature card. */
  --radius-disc: 50%; /** Icon discs and avatars only. */
  --size-target-min: 24px; /** Every target, or spaced so a 24 px circle centred on it meets no other. */
  --size-target-phone: 44px; /** Primary controls, inputs and list rows on a phone. */
  --size-control: 40px; /** Buttons and inputs on the PC. */
  --size-table-row: 40px; /** Dense table rows on the PC. */
  --size-header-phone: 56px;
  --size-header-pc: 64px;
  --size-action-bar: 72px; /** The sticky bottom action bar on the phone (44 px button plus 14 px above and below). */
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-icon-tile: 40px; /** The tinted tile behind a Lucide icon. */
  --size-icon-stroke: 1.75px; /** Lucide stroke width; Care's thin-line glyphs. */
  --size-content-max: 1200px;
  --size-content-min: 960px; /** The PC content width runs 960 to 1200. */
  --size-frame-phone: 390px;
  --size-frame-pc: 1280px;
  --breakpoint-sm: 390px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --shadow-card: 0px 6px 18px 0px #0828581A; /** Care's card shadow: navy at 10 percent. */
  --shadow-raised: 0px 1px 2px 0px #08285814, 0px 12px 32px 0px #0828581A; /** The sticky action bar, popovers, the timeout banner. */
  --motion-duration-fast: 120ms; /** Hover and focus. */
  --motion-duration-base: 200ms; /** Panels, banners, the segmented control's thumb. */
  --motion-easing-out: cubic-bezier(0.22, 1, 0.36, 1); /** Ease-out for everything; no bounce, no elastic. Under prefers-reduced-motion every transition is instant. */
  --layer-dropdown: 100;
  --layer-sticky: 200;
  --layer-banner: 300;
  --layer-toast: 400;
  --layer-tooltip: 500;
  --surface-shell: var(--color-neutral-cream); /** The frame: header ground on the sign-in screen, the page ground behind cards, section bands. */
  --surface-default: var(--color-neutral-white); /** The working surface: a form, a table, a list, a card. */
  --surface-panel: var(--color-neutral-light); /** A quieter panel inside a working surface. */
  --surface-stripe: var(--color-neutral-stripe); /** Alternate table rows. */
  --surface-selected: var(--color-navy-100); /** The selected row or card. */
  --surface-inverse: var(--color-navy-900); /** The header bar, table header, the feature card. */
  --surface-disabled: var(--color-neutral-light);
  --text-default: var(--color-neutral-ink); /** Body, list and table text on white. */
  --text-heading: var(--color-navy-900); /** Every heading and the page title. */
  --text-muted: var(--color-neutral-muted); /** Straps, help text, body text on cream. */
  --text-secondary: var(--color-neutral-600); /** Metadata such as Updated 2 hours ago, placeholders. On white, cream and the tints only; on the selected row (navy 100) it holds 4.3:1, so use text.muted there. */
  --text-kicker: var(--color-sky-600); /** The route kicker and category labels, 12 px bold uppercase with 0.04em tracking. */
  --text-link: var(--color-sky-600);
  --text-link-hover: var(--color-sky-700);
  --text-on-inverse: var(--color-neutral-white); /** Text on navy and on filled buttons. */
  --text-on-inverse-muted: var(--color-sky-100); /** Secondary text on navy (12.7:1). */
  --text-disabled: var(--color-neutral-600);
  --border-default: var(--color-neutral-border); /** Hairlines between rows and around cards. */
  --border-control: var(--color-neutral-500); /** Input, select and checkbox boundaries: 3:1 on white and cream. */
  --border-control-hover: var(--color-navy-600);
  --border-control-active: var(--color-navy-900); /** The focused or checked control's 2 px border. */
  --border-invalid: var(--color-red-600); /** The 2 px border of a field in error. */
  --border-on-inverse: var(--color-navy-700); /** Dividers inside the navy header. */
  --action-primary: var(--color-orange-600); /** Primary button fill; white 16 px text on it holds 5.3:1. Brand orange 500 would hold only 3.6:1. */
  --action-primary-hover: var(--color-orange-700);
  --action-primary-active: var(--color-orange-800);
  --action-primary-text: var(--color-neutral-white);
  --action-secondary: var(--color-neutral-white); /** Secondary button fill; its 2 px border and text are navy. */
  --action-secondary-border: var(--color-navy-900);
  --action-secondary-hover: var(--color-navy-100);
  --action-secondary-text: var(--color-navy-900);
  --action-destructive: var(--color-red-600); /** Cancel order, remove line. Never orange. */
  --action-destructive-hover: var(--color-red-700);
  --action-destructive-text: var(--color-neutral-white);
  --action-disabled: var(--color-neutral-border); /** Disabled fill; text on it is muted (5.8:1), though disabled controls are exempt. */
  --action-disabled-text: var(--color-neutral-muted);
  --focus-ring: var(--color-navy-900);
  --focus-inner: var(--color-neutral-white);
  --status-submitted-fill: var(--color-gold-100);
  --status-submitted-text: var(--color-gold-600);
  --status-waiting-fill: var(--color-gold-100);
  --status-waiting-text: var(--color-gold-600);
  --status-processing-fill: var(--color-gold-100);
  --status-processing-text: var(--color-gold-600);
  --status-dispatched-fill: var(--color-sky-100);
  --status-dispatched-text: var(--color-sky-600);
  --status-delivered-fill: var(--color-green-100);
  --status-delivered-text: var(--color-green-600);
  --status-cancelled-fill: var(--color-neutral-stripe);
  --status-cancelled-text: var(--color-neutral-muted);
  --status-needs-attention-fill: var(--color-red-100);
  --status-needs-attention-text: var(--color-red-600);
  --feedback-success-fill: var(--color-green-100);
  --feedback-success-text: var(--color-green-600);
  --feedback-success-border: var(--color-green-500);
  --feedback-warning-fill: var(--color-gold-100);
  --feedback-warning-text: var(--color-gold-600);
  --feedback-warning-border: var(--color-gold-600);
  --feedback-error-fill: var(--color-red-100);
  --feedback-error-text: var(--color-red-600);
  --feedback-error-border: var(--color-red-600);
  --feedback-information-fill: var(--color-sky-100);
  --feedback-information-text: var(--color-sky-600);
  --feedback-information-border: var(--color-sky-500);
}