/* GENERATED by scripts/sync_design_system.py from src/dashboard/tokens.json (Claude Design System export, synced 2026-09-17) - do not edit; re-run the sync. */
:root, [data-theme="light"] {
  --Context-Overall-Primary: #1e92bd; /* Primary action colour for platform-wide UI (buttons, checkboxes, radios, input focus, links in the Overall context). White text on it is 3.56:1, below 4.5:1 for 16px text: kept as designed, use bold 19px+ or Dark-Blue where contrast matters. */
  --Context-Overall-Primary-opacity-20: #1e92bd33; /* Tint of Context-Overall-Primary for active navigation cards and focus halos on Background-Default. */
  --Context-Overall-Primary-opacity-40: #1e92bd66; /* Pressed state layer behind checkboxes and radio buttons. */
  --Context-NDC-Primary: #19748c; /* Identity colour of the NDC section: section hero, NDC buttons, NDC icons. White text on it passes (5.36:1). */
  --Context-NDC-Primary-opacity-80: #19748ccc; /* Strong NDC tint for hero illustration strokes and emphasised NDC surfaces. */
  --Context-NDC-Primary-opacity-20: #19748c33; /* Icon discs in NDC stat tiles and the NDC navigation card gradient. */
  --Context-NBSAP-Primary: #27aa9c; /* Identity colour of the NBSAP section. Use for fills and icons, not as a ground for white text (2.87:1). */
  --Context-NBSAP-Primary-opacity-80: #27aa9ccc; /* Strong NBSAP tint for hero illustration strokes and emphasised NBSAP surfaces. */
  --Context-NBSAP-Primary-opacity-20: #27aa9c33; /* Icon discs in NBSAP stat tiles. */
  --Context-NBSAP-Primary-opacity-10: #27aa9c1a; /* Faint NBSAP wash for the NBSAP hero panel and navigation card gradient. */
  --Background-Default: #ffffff; /* Page and card background. */
  --Background-Subtle: #f6f6f6; /* Grouping panels (At a glance blocks), hover and focus state layers. */
  --Text-Primary: #333333; /* Headings, body copy and figures on Background-Default and Background-Subtle (12.6:1). */
  --Text-Secondary: #7f7f7f; /* Captions, descriptions, labels and help text on Background-Default. 4.0:1 on white and 3.7:1 on Background-Subtle: below 4.5:1, kept as designed; prefer 14px+ and avoid it on Background-Subtle. */
  --Text-Disabled: #b2b2b2; /* Disabled and 'soon' navigation items. Decorative only (2.1:1 on white). */
  --Text-Inverse: #ffffff; /* Text and icons on Context-NDC-Primary, Dark-Blue and Context-Overall-Primary fills. */
  --Text-Link: #ffffff; /* Link text as defined in the file (white): use only on dark fills; on light grounds links use Context-Overall-Primary. */
  --Border-Default: #e8e8e8; /* Card outlines, dividers and table rules. */
  --Border-Subtle: #f6f6f6; /* Faint separators inside grouped panels. */
  --Border-Strong: #c7c7c7; /* Emphasised outlines, such as neutral badges ('Soon', 'Not submitted'). */
  --Border-Disabled: #c7c7c780; /* Disabled checkbox fills and borders, input placeholder text. */
  --Border-Inverse: #ffffff; /* Borders on dark or saturated fills. */
  --Colors-Neutral-0: #ffffff; /* Input field fill. */
  --Colors-Neutral-100: #f6f6f6; /* Input field border and neutral panels. */
  --Colors-Neutral-200: #e8e8e8; /* Neutral rules and track fills in charts. */
  --Icon-icon-color-invert: #ffffff; /* Check and minus glyphs on filled checkboxes. */
  --M3-black: #000000; /* Pure black from the Material 3 base; only for shadows or overlays, never for text (use Text-Primary). */
  --FAO-Logo-Blue: #5792c9; /* The FAO logo blue, as in the official logo files. Reserved for the logo itself; do not use it for text or UI (3.3:1 on white). */
  --Dark-Blue: #116aab; /* FAO corporate blue from the website styleguide: Ghost button fill, FAO header links. White text passes (5.7:1). */
  --Dark-Gray: #545454; /* FAO styleguide body text (legacy website components). */
  --Text-Color: #545454; /* FAO styleguide default text colour (same value as Dark-Gray). */
  --Light-Gray: #f2f2f2; /* FAO styleguide content background (legacy website components). */
  --Light-Blue: #e5ecf4; /* FAO styleguide Content Background panels. */
  --Medium-Gray: #999999; /* FAO styleguide dates, card categories and the Article accent bar. 2.8:1 on white: kept as designed, use only for 12px bold metadata that is not essential. */
  --Orange: #f58320; /* FAO styleguide accent: home icon in Navigation, E-learning accent bar, event years. 2.6:1 on white: decorative and bold 13px only. */
  --Caption: #1c4767; /* FAO styleguide Hero text panel and dark overlays. White text on it passes (9.8:1). */
  --White: #ffffff; /* FAO styleguide white: header, footer and card grounds, text on Caption and Dark-Gray. (The file also names #f7f8f9 'White' on list items; that value is kept as a literal.) */
  --Data-Overall-01: #31d4c3; /* Chart series 1 for cross-framework (Overall) charts. */
  --Data-Overall-02: #19748c; /* Chart series 2, Overall. */
  --Data-Overall-03: #92e9f4; /* Chart series 3, Overall. */
  --Data-Overall-04: #26b7ec; /* Chart series 4, Overall. */
  --Data-Overall-05: #fc6f30; /* Chart series 5, Overall. */
  --Data-Overall-06: #ffd175; /* Chart series 6, Overall. */
  --Data-Overall-07: #99856b; /* Chart series 7, Overall. */
  --Data-Overall-08: #e8e8e8; /* Chart series 8 or remainder/no data, Overall. */
  --Data-NDC-01: #177090; /* Chart series 1 on NDC pages (dominant series, map highlights). */
  --Data-NDC-02: #26b7ec; /* Chart series 2 on NDC pages. */
  --Data-NDC-03: #92e9f4; /* Chart series 3 on NDC pages. */
  --Data-NDC-04: #27aa9c; /* Chart series 4 on NDC pages. */
  --Data-NDC-05: #99856b; /* Chart series 5 on NDC pages. */
  --Data-NDC-06: #cca75e; /* Chart series 6 on NDC pages. */
  --Data-NDC-07: #ffe2aa; /* Chart series 7 on NDC pages. */
  --Data-NDC-08: #e8e8e8; /* Chart series 8 or no data on NDC pages. */
  --Data-NBSAP-01: #26b7ec; /* Chart series 1 on NBSAP pages. */
  --Data-NBSAP-02: #27aa9c; /* Chart series 2 on NBSAP pages. */
  --Data-NBSAP-03: #31d4c3; /* Chart series 3 on NBSAP pages. */
  --Data-NBSAP-04: #ffd175; /* Chart series 4 on NBSAP pages. */
  --Data-NBSAP-05: #fc6f30; /* Chart series 5 on NBSAP pages. */
  --SDG-01: #e3253c; /* Background of the SDG 1 tag (SdgIcon), with a white 13px bold number. */
  --SDG-02: #dea73a; /* Background of the SDG 2 tag (SdgIcon), with a white 13px bold number. */
  --SDG-03: #4c9f46; /* Background of the SDG 3 tag (SdgIcon), with a white 13px bold number. */
  --SDG-04: #c5202e; /* Background of the SDG 4 tag (SdgIcon), with a white 13px bold number. */
  --SDG-05: #ef422c; /* Background of the SDG 5 tag (SdgIcon), with a white 13px bold number. */
  --SDG-06: #29bde2; /* Background of the SDG 6 tag (SdgIcon), with a white 13px bold number. */
  --SDG-07: #fac315; /* Background of the SDG 7 tag (SdgIcon), with a white 13px bold number. */
  --SDG-08: #a21c44; /* Background of the SDG 8 tag (SdgIcon), with a white 13px bold number. */
  --SDG-09: #f36a2c; /* Background of the SDG 9 tag (SdgIcon), with a white 13px bold number. */
  --SDG-10: #dd1768; /* Background of the SDG 10 tag (SdgIcon), with a white 13px bold number. */
  --SDG-11: #f99d28; /* Background of the SDG 11 tag (SdgIcon), with a white 13px bold number. */
  --SDG-12: #be8b2c; /* Background of the SDG 12 tag (SdgIcon), with a white 13px bold number. */
  --SDG-13: #417f45; /* Background of the SDG 13 tag (SdgIcon), with a white 13px bold number. */
  --SDG-14: #1c97d4; /* Background of the SDG 14 tag (SdgIcon), with a white 13px bold number. */
  --SDG-15: #5cba47; /* Background of the SDG 15 tag (SdgIcon), with a white 13px bold number. */
  --SDG-16: #07699e; /* Background of the SDG 16 tag (SdgIcon), with a white 13px bold number. */
  --SDG-17: #18496b; /* Background of the SDG 17 tag (SdgIcon), with a white 13px bold number. */
}
:root {
  --Spacing-XSM: 4px;
  --Spacing-SM: 8px;
  --Spacing-MD: 16px;
  --Spacing-LG: 24px;
  --Spacing-XLG: 32px;
  --Spacing-1: 4px;
  --Spacing-2: 8px;
  --Spacing-3: 12px;
  --Spacing-4: 16px;
  --Radius-SM: 8px;
  --Radius-MD: 20px;
  --Radius-Full: 1000px;
  --Numbers-0: 0px;
  --Numbers-16: 16px;
  --Numbers-32: 32px;
  --Numbers-72: 72px;
  --font-sans: "Open Sans", system-ui, sans-serif;
  --font-mono: Inconsolata, ui-monospace, monospace;
  --text-Page-title: 400 32px/100% var(--font-sans);
  --text-Highlights: 400 24px/100% var(--font-sans);
  --text-Subtitle: 400 20px/100% var(--font-sans);
  --text-Subtitle-small: 400 16px/24px var(--font-sans);
  --text-Title-link: 400 20px/26px var(--font-sans);
  --text-Category: 700 12px/13px var(--font-sans);
  --text-Date: 700 12px/100% var(--font-sans);
  --text-Paragraph: 400 16px/100% var(--font-sans);
  --text-Button: 600 16px/1 var(--font-sans);
  --text-Heading-1: 400 40px/1.2 var(--font-sans);
  --text-Heading-2: 400 32px/1.2 var(--font-sans);
  --text-Heading-3: 400 28px/1.2 var(--font-sans);
  --text-Heading-4: 400 24px/1.2 var(--font-sans);
  --text-Heading-5: 400 20px/1.2 var(--font-sans);
  --text-Heading-6: 400 16px/1.2 var(--font-sans);
  --text-Label1-Regular: 400 16px/1.2 var(--font-mono);
}
.Page-title {
  font: var(--text-Page-title);
  letter-spacing: 0;
}
.Highlights {
  font: var(--text-Highlights);
  letter-spacing: 0;
}
.Subtitle {
  font: var(--text-Subtitle);
  letter-spacing: 0;
}
.Subtitle-small {
  font: var(--text-Subtitle-small);
  letter-spacing: 0;
}
.Title-link {
  font: var(--text-Title-link);
  letter-spacing: 0;
}
.Category {
  font: var(--text-Category);
  letter-spacing: 0;
}
.Date {
  font: var(--text-Date);
  letter-spacing: 0;
}
.Paragraph {
  font: var(--text-Paragraph);
  letter-spacing: 0;
}
.Button {
  font: var(--text-Button);
  letter-spacing: 0;
}
.Heading-1 {
  font: var(--text-Heading-1);
  letter-spacing: 0;
}
.Heading-2 {
  font: var(--text-Heading-2);
  letter-spacing: 0;
}
.Heading-3 {
  font: var(--text-Heading-3);
  letter-spacing: 0;
}
.Heading-4 {
  font: var(--text-Heading-4);
  letter-spacing: 0;
}
.Heading-5 {
  font: var(--text-Heading-5);
  letter-spacing: 0;
}
.Heading-6 {
  font: var(--text-Heading-6);
  letter-spacing: 0;
}
.Label1-Regular {
  font: var(--text-Label1-Regular);
  letter-spacing: 0;
}