/* TreatingFoodAllergy — generated from tokens.json */
:root, [data-theme="light"] {
  --primary-50: #edeffe; /* Tinted grounds: pressed Outline/Clear buttons, accent surfaces, Default Filled chip. */
  --primary-100: #c8cefc; /* Selected/pressed tints and Warning chip fill. */
  --primary-200: #aeb6fb; /* Focus halo colour around outline controls (light: not a text or 3:1 ring colour). */
  --primary-300: #8895f9; /* Illustrative accents. */
  --primary-400: #7181f8; /* Lighter accent fills and highlights. */
  --primary-500: #4e61f6; /* The primary action colour: Filled Button fill, links, accent icons and text. */
  --primary-600: #4758e0; /* Darker accent, hover emphasis. */
  --primary-700: #3745af; /* Focus-state fill and border for Buttons; strong accent text on light grounds. */
  --primary-800: #2b3587; /* Disabled Filled button fill; darker hover/pressed steps. */
  --primary-900: #212967; /* Deepest primary: dark surfaces (site footer) and the darkest copy colour on light grounds. */
  --grey-50: #f9fafb; /* Page and card ground, Filled input ground, grey surface. */
  --grey-100: #f3f4f6; /* Dividers and pop-up borders. */
  --grey-200: #e5e7ea; /* Input and control borders on white. */
  --grey-300: #d2d5db; /* Light text/icon and control outlines. */
  --grey-400: #9ea2ae; /* Placeholder, disabled and tertiary text and icons. Fails 4.5:1 on white: only for disabled or supplementary content. */
  --grey-500: #6d717f; /* Secondary (dark grey) text and detail text on white/grey-50. */
  --grey-600: #4d5461; /* Secondary text on white and grey-50. */
  --grey-700: #394050; /* Strong neutral text on tinted grounds. */
  --grey-800: #212936; /* Deep neutral for dark grounds and strong dividers. */
  --grey-900: #131927; /* Primary text and black icons; the ink of the system; dark surface. */
  --white-20: #ffffff33; /* White at 20% opacity. Overlays and text on dark grounds (text-secondary-white is white-60). */
  --white-10: #ffffff1a; /* White at 10% opacity. Overlays and text on dark grounds (text-secondary-white is white-60). */
  --white-30: #ffffff4d; /* White at 30% opacity. Overlays and text on dark grounds (text-secondary-white is white-60). */
  --white-40: #ffffff66; /* White at 40% opacity. Overlays and text on dark grounds (text-secondary-white is white-60). */
  --white-50: #ffffff80; /* White at 50% opacity. Overlays and text on dark grounds (text-secondary-white is white-60). */
  --white-60: #ffffff99; /* White at 60% opacity. Overlays and text on dark grounds (text-secondary-white is white-60). */
  --white-70: #ffffffb2; /* White at 70% opacity. Overlays and text on dark grounds (text-secondary-white is white-60). */
  --white-80: #ffffffcc; /* White at 80% opacity. Overlays and text on dark grounds (text-secondary-white is white-60). */
  --white-90: #ffffffe5; /* White at 90% opacity. Overlays and text on dark grounds (text-secondary-white is white-60). */
  --white-100: #ffffff; /* White at 100% opacity. Overlays and text on dark grounds (text-secondary-white is white-60). */
  --black-10: #0000001a; /* Black at 10% opacity. Scrims, overlays and tinted shadows on light grounds. */
  --black-20: #00000033; /* Black at 20% opacity. Scrims, overlays and tinted shadows on light grounds. */
  --black-30: #0000004d; /* Black at 30% opacity. Scrims, overlays and tinted shadows on light grounds. */
  --black-40: #00000066; /* Black at 40% opacity. Scrims, overlays and tinted shadows on light grounds. */
  --black-50: #00000080; /* Black at 50% opacity. Scrims, overlays and tinted shadows on light grounds. */
  --black-60: #00000099; /* Black at 60% opacity. Scrims, overlays and tinted shadows on light grounds. */
  --black-70: #000000b2; /* Black at 70% opacity. Scrims, overlays and tinted shadows on light grounds. */
  --black-80: #000000cc; /* Black at 80% opacity. Scrims, overlays and tinted shadows on light grounds. */
  --black-90: #000000e5; /* Black at 90% opacity. Scrims, overlays and tinted shadows on light grounds. */
  --black-100: #000000; /* Black at 100% opacity. Scrims, overlays and tinted shadows on light grounds. */
  --surface-white: var(--white-100); /* Default page and card ground. */
  --text-primary-black: var(--grey-900); /* Body and heading text on surface-white and surface-grey (17.6:1). */
  --text-secondary-dark-grey: var(--grey-500); /* Secondary text on surface-white and surface-grey (4.9:1 and 4.7:1). */
  --text-links: var(--primary-500); /* Links on surface-white (4.8:1). */
  --text-primary-white: var(--white-100); /* Text on surface-black, primary-500 and other dark fills. */
  --text-disabled: var(--grey-400); /* Disabled text only. */
  --text-accent: var(--primary-500); /* Accent text on surface-white (4.8:1); not on surface-accent (4.2:1). */
  --icon-white: var(--white-100); /* Icons on dark and primary fills. */
  --icon-black: var(--grey-900); /* Default icon ink (grey-900). */
  --icon-accent: var(--primary-500); /* Accent and active icons. */
  --icon-grey: var(--grey-400); /* Inactive and placeholder icons. */
  --text-grey: var(--grey-400); /* Tertiary text and placeholders; 2.6:1 on white, so never for content that must be read. */
  --text-light-grey: var(--grey-300); /* Decorative text on dark grounds only; 1.5:1 on white. */
  --icon-light-grey: var(--grey-300); /* Decorative icons. */
  --icon-success: #43b75d; /* Success icons. */
  --icon-info: #0095ff; /* Info icons. */
  --icon-warning: #ffaa00; /* Warning icons. */
  --icon-error: #ee443f; /* Error icons. */
  --text-success: #43b75d; /* Success text; 2.6:1 on white: pair with a check icon or word, or use green-700. */
  --text-info: #0095ff; /* Info text; 3.1:1 on white: large text only or use blue-700. */
  --text-warning: #ffaa00; /* Warning text; 1.9:1 on white: never small text, use yellow-800 for readable warning copy. */
  --text-error: #ee443f; /* Error text; 3.8:1 on white: 18px+ or paired with an icon, or use red-700. */
  --text-secondary-white: var(--white-60); /* Secondary text on dark grounds (white at 60%). */
  --surface-grey: var(--grey-50); /* Alternate section ground, list rows, Filled input ground (grey-50). */
  --surface-accent: var(--primary-50); /* Tinted accent ground (primary-50). */
  --surface-black: var(--grey-900); /* Dark ground (grey-900). */
  --brand-900: #001966; /* TreatingFoodAllergy headings, section numerals and the darkest brand ground (Mockup). 15.8:1 on white. */
  --brand-800: #001e79; /* Darker brand hover/pressed steps. */
  --brand-700: #02289a; /* TreatingFoodAllergy body copy on white and grey-50 in Mockup cards and bullets (11.9:1). */
  --brand-600: #0832b2; /* Brand emphasis. */
  --brand-500: #1341cd; /* Brand blue for fills and links in the brand-tuned style set. */
  --brand-400: #3b87ea; /* Timeline dots and highlights in Mockup. */
  --brand-300: #5296ee; /* Brand accent. */
  --brand-200: #8ebffe; /* Table 3 Columns borders and dividers. */
  --brand-100: #bddafe; /* Sources and Table 2 Columns hairlines and dividers (decorative, 1.4:1 on white). */
  --brand-50: #e9f3ff; /* Lightest brand tint. */
  --palette-sky: #b3d5df; /* Loose swatch on the Design System page: pale sky blue, matches the sky-blue ground of the poppy photography. Not used by any component. */
  --palette-paper: #efefed; /* Loose swatch on the Design System page: warm off-white. Not used by any component. */
  --palette-stone: #8a8a88; /* Loose swatch on the Design System page: mid neutral. Not used by any component. */
  --palette-ink: #080808; /* Loose swatch on the Design System page: near-black. Not used by any component. */
  --shadow-100: 0 4px 4px -2px #13192714, 0 2px 4px -2px #1319271f; /* Lowest lift: resting cards. */
  --shadow-200: 0 8px 8px -4px #13192714, 0 4px 6px -4px #1319271f; /* Cards on hover, small popovers. */
  --shadow-300: 0 8px 16px -6px #13192714, 0 6px 8px -6px #1319271f; /* Dropdown menus. */
  --shadow-400: 0 8px 24px -4px #13192714, 0 6px 12px -6px #1319271f; /* Context menus. */
  --shadow-500: 0 10px 32px -4px #1319271a, 0 6px 14px -6px #1319271f; /* Action sheets. */
  --shadow-600: 0 12px 42px -4px #1319271f, 0 8px 18px -6px #1319271f; /* Pop-ups. */
  --shadow-700: 0 14px 64px -4px #1319271f, 0 8px 22px -6px #1319271f; /* Modals. */
  --shadow-800: 0 18px 88px -4px #13192724, 0 8px 28px -6px #1319271f; /* Highest elevation. */
}
:root {
  --spacing-none: 0px; /* No gap. */
  --spacing-xxs: 4px; /* Hairline gaps, icon-to-label nudges (Spacing/1). */
  --spacing-xs: 8px; /* Gap between buttons and list items; text-frame side padding in Button (Spacing/2). */
  --spacing-sm: 12px; /* Icon-to-text gap in inputs and list rows; control padding (Spacing/3). */
  --spacing-md: 16px; /* Default gap between stacked buttons and card sections (Spacing/4). */
  --spacing-lg: 20px; /* Large control padding (Spacing/5). */
  --spacing-xl: 24px; /* Card and pop-up padding (Spacing/6). */
  --radius-xxs: 4px; /* Smallest corner (Spacing/1); page-control dots. */
  --radius-xs: 8px; /* Menus, list ends, Medium inputs, steppers (Spacing/2). */
  --radius-sm: 12px; /* Large inputs, dropdown triggers, cards, pop-ups (Spacing/3). */
  --radius-md: 16px; /* Larger panels (Spacing/4). */
  --radius-lg: 20px; /* Tab items (Spacing/5). */
  --radius-xl: 24px; /* Pagination items (Spacing/6). */
  --radius-button: 8px; /* Variable "Corner radius/Buttons/Giant - Small". The Button components in the file are drawn as pills (radius-pill); this variable is defined but hidden and unbound. */
  --radius-button-tiny: 6px; /* Variable "Corner radius/Buttons/Tiny". Defined but hidden and unbound; see radius-button. */
  --radius-pill: 999px; /* Buttons and chips as drawn in the components (corner radius 1000 in the file): fully rounded ends. */
  --size-button-giant: 56px; /* Giant Button height. */
  --size-button-large: 48px; /* Large Button height; Large Input height; list-row and menu-row height. */
  --size-button-medium: 40px; /* Medium Button height; Medium Input height; Tab height. */
  --size-button-small: 32px; /* Small Button height; Stepper height. */
  --size-button-tiny: 24px; /* Tiny Button height. */
  --size-icon: 24px; /* Default icon box (Iconoir 24px grid). */
  --size-icon-tiny: 16px; /* Icon box inside Tiny buttons. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --text-h1: 400 72px/1 var(--font-sans); /* Page title on desktop (Mockup "Day-to-day guidance"). Tight leading of 1. */
  --text-h2: 400 48px/1 var(--font-sans); /* Section headings ("How it works"). */
  --text-h3: 400 32px/1 var(--font-sans); /* Sub-section headings. */
  --text-h4: 400 28px/1 var(--font-sans); /* Card and callout headings. */
  --text-h5: 400 24px/28px var(--font-sans); /* Image-card titles and table column headings. */
  --text-s1: 600 18px/28px var(--font-sans); /* Subtitle, FAQ-style question, Pop-up title. */
  --text-s2: 600 16px/24px var(--font-sans); /* Card titles and emphasised body. */
  --text-b1: 400 18px/24px var(--font-sans); /* Lead paragraph. */
  --text-b2: 400 16px/24px var(--font-sans); /* Default body copy, input value text, list rows. */
  --text-b3: 400 14px/20px var(--font-sans); /* Secondary body, card descriptions, helper text. */
  --text-b4: 500 14px/20px var(--font-sans); /* Emphasised secondary body, input labels. */
  --text-c1: 400 12px/16px var(--font-sans); /* Captions. */
  --text-c2: 500 12px/16px var(--font-sans); /* Emphasised captions, chip text. */
  --text-c3: 500 10px/14px var(--font-sans); /* Smallest caption, tiny chips. */
  --text-label: 500 14px/16px var(--font-sans); /* Overline and step numerals ("01"). Set in upper case. */
  --text-button-giant: 600 18px/24px var(--font-sans); /* Giant Button label. */
  --text-button-large: 600 16px/20px var(--font-sans); /* Large Button label. */
  --text-button-medium: 600 14px/16px var(--font-sans); /* Medium Button label. */
  --text-button-small: 600 12px/16px var(--font-sans); /* Small Button label. */
  --text-button-tiny: 600 10px/12px var(--font-sans); /* Tiny Button label. */
  --text-stat: 400 112px/1 var(--font-serif); /* Oversized figures such as "60 in 100" (Mockup uses 114-120px Playfair Display). */
}
.h1 {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.h4 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.h5 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.s1 {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
}
.s2 {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.b1 {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.b2 {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.b3 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.b4 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.c1 {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.c2 {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.c3 {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.button-giant {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.button-large {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.button-medium {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.button-small {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.button-tiny {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.stat {
  font-family: var(--font-serif);
  font-size: 112px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}