/* GENERATED by scripts/build-design-tokens.cjs from data/design-tokens.json. Do not edit by hand. */
:root {
  /* 1. Palette */
  --color-white: #ffffff;
  --color-cornflower-blue-100: #edf4ff;
  --color-cornflower-blue-200: #b8d5ff;
  --color-cornflower-blue-300: #82b4ff;
  --color-cornflower-blue-400: #5193f4;
  --color-cornflower-blue-500: #1670e7;
  --color-cornflower-blue-600: #0859be;
  --color-cornflower-blue-700: #004397;
  --color-cornflower-blue-800: #002f6f;
  --color-navy-blue-100: #5e7fc7;
  --color-navy-blue-200: #4d6db3;
  --color-navy-blue-300: #3d5ba0;
  --color-navy-blue-400: #2d4a8d;
  --color-navy-blue-500: #1e397a;
  --color-navy-blue-600: #102868;
  --color-navy-blue-700: #041756;
  --color-navy-blue-800: #000444;
  --color-success-green-100: #d8ffe3;
  --color-success-green-200: #7afeac;
  --color-success-green-300: #63e998;
  --color-success-green-400: #4bd484;
  --color-success-green-500: #2fbf71;
  --color-success-green-600: #008b4c;
  --color-success-green-700: #00582e;
  --color-success-green-800: #002a12;
  --color-purple-grape-100: #f3f1ff;
  --color-purple-grape-200: #cec3ff;
  --color-purple-grape-300: #ab93fd;
  --color-purple-grape-400: #8a64ec;
  --color-purple-grape-500: #6d28d9;
  --color-purple-grape-600: #5615b0;
  --color-purple-grape-700: #3f0089;
  --color-purple-grape-800: #29005d;
  --color-amber-yellow-100: #fffbeb;
  --color-amber-yellow-200: #fef3c6;
  --color-amber-yellow-300: #fee685;
  --color-amber-yellow-400: #ffd230;
  --color-amber-yellow-500: #ffb900;
  --color-amber-yellow-600: #fe9a00;
  --color-amber-yellow-700: #e17100;
  --color-amber-yellow-800: #bb4d00;
  --color-tangerine-orange-100: #ffedd4;
  --color-tangerine-orange-200: #ffd7a8;
  --color-tangerine-orange-300: #ffb86a;
  --color-tangerine-orange-400: #ff8904;
  --color-tangerine-orange-500: #ff6900;
  --color-tangerine-orange-600: #f54a00;
  --color-tangerine-orange-700: #ca3500;
  --color-tangerine-orange-800: #9f2d00;
  --color-glacial-cyan-100: #d5f5ff;
  --color-glacial-cyan-200: #b8efff;
  --color-glacial-cyan-300: #86e5ff;
  --color-glacial-cyan-400: #00d3f3;
  --color-glacial-cyan-500: #00b8db;
  --color-glacial-cyan-600: #0092b8;
  --color-glacial-cyan-700: #007595;
  --color-glacial-cyan-800: #005f78;
  --color-crimson-red-100: #ffdfe2;
  --color-crimson-red-200: #ffc7cc;
  --color-crimson-red-300: #ff9ca7;
  --color-crimson-red-400: #fc6c83;
  --color-crimson-red-500: #ee3763;
  --color-crimson-red-600: #b71344;
  --color-crimson-red-700: #7e002a;
  --color-crimson-red-800: #460013;
  --color-seafoam-teal-100: #d0fff5;
  --color-seafoam-teal-200: #94ffec;
  --color-seafoam-teal-300: #52fbe2;
  --color-seafoam-teal-400: #41efd6;
  --color-seafoam-teal-500: #2de3cb;
  --color-seafoam-teal-600: #00a08e;
  --color-seafoam-teal-700: #006156;
  --color-seafoam-teal-800: #002923;
  --color-slate-gray-50: #f8fafc;
  --color-slate-gray-100: #f1f5f9;
  --color-slate-gray-200: #e2e8f0;
  --color-slate-gray-300: #cbd5e1;
  --color-slate-gray-400: #94a3b8;
  --color-slate-gray-500: #64748b;
  --color-slate-gray-700: #334155;
  --color-slate-gray-900: #0f172a;

  /* 2. Overlays */
  --overlay-white-8: rgba(255, 255, 255, 0.08);
  --overlay-white-16: rgba(255, 255, 255, 0.16);
  --overlay-white-24: rgba(255, 255, 255, 0.24);
  --overlay-white-88: rgba(255, 255, 255, 0.88);
  --overlay-black-8: rgba(0, 0, 0, 0.08);
  --overlay-black-16: rgba(0, 0, 0, 0.16);
  --overlay-black-60: rgba(0, 0, 0, 0.6);

  /* 3. Role names (pages use only these) */
  /* Page areas (big, full-width sections) */
  --bg-page: var(--color-white);
  --bg-section-alt: var(--color-slate-gray-100);
  --bg-section-dark: var(--color-navy-blue-700);
  --bg-section-darker: var(--color-navy-blue-800);
  --gradient-dark: linear-gradient(135deg, var(--color-navy-blue-800) 0%, var(--color-navy-blue-700) 50%, var(--color-navy-blue-800) 100%);
  /* Cards and boxes (sit on a page area) */
  --bg-card: var(--color-white);
  --bg-card-dark: var(--color-navy-blue-600);
  /* Inside a card */
  --bg-inset: var(--color-slate-gray-100);
  --bg-inset-strong: var(--color-slate-gray-200);
  --bg-inset-dark: var(--color-navy-blue-700);
  /* Text on light areas */
  --text-heading: var(--color-slate-gray-900);
  --text-subheading: var(--color-slate-gray-700);
  --text-lead: var(--color-slate-gray-700);
  --text-body: var(--color-slate-gray-700);
  --text-small: var(--color-slate-gray-700);
  --text-label: var(--color-slate-gray-700);
  --text-link: var(--color-cornflower-blue-600);
  --text-link-hover: var(--color-cornflower-blue-700);
  --text-link-visited: var(--color-purple-grape-700);
  --text-disabled: var(--color-slate-gray-400);
  /* Text on dark areas */
  --text-on-dark-heading: var(--color-white);
  --text-on-dark-body: var(--overlay-white-88);
  --text-on-dark-small: var(--overlay-white-88);
  --text-on-dark-link: var(--color-cornflower-blue-300);
  --text-on-dark-highlight: var(--color-success-green-500);
  --text-on-dark-disabled: var(--color-slate-gray-400);
  /* Lines and edges */
  --border-default: var(--color-slate-gray-200);
  --border-strong: var(--color-slate-gray-400);
  --border-focus: var(--color-cornflower-blue-500);
  --border-focus-on-dark: var(--color-cornflower-blue-300);
  --border-on-dark: var(--overlay-white-16);
  --border-on-dark-strong: var(--overlay-white-24);
  /* Buttons */
  --button-primary-bg: var(--color-cornflower-blue-500);
  --button-primary-bg-hover: var(--color-cornflower-blue-600);
  --button-primary-bg-pressed: var(--color-cornflower-blue-700);
  --button-primary-text: var(--color-white);
  --button-secondary-border: var(--color-cornflower-blue-500);
  --button-secondary-text: var(--color-cornflower-blue-600);
  --button-secondary-bg-hover: var(--color-cornflower-blue-100);
  --button-cta-bg: var(--color-success-green-500);
  --button-cta-bg-hover: var(--color-success-green-400);
  --button-cta-bg-pressed: var(--color-success-green-600);
  --button-cta-text: var(--color-navy-blue-800);
  --button-cta-alt-bg: var(--color-amber-yellow-500);
  --button-cta-alt-bg-hover: var(--color-amber-yellow-400);
  --button-cta-alt-bg-pressed: var(--color-amber-yellow-600);
  --button-cta-alt-text: var(--color-navy-blue-800);
  --button-danger-bg: var(--color-crimson-red-600);
  --button-danger-bg-hover: var(--color-crimson-red-700);
  --button-danger-text: var(--color-white);
  --button-disabled-bg: var(--color-slate-gray-200);
  --button-disabled-text: var(--color-slate-gray-400);
  /* Form fields */
  --input-bg: var(--color-white);
  --input-border: var(--color-slate-gray-500);
  --input-border-hover: var(--color-slate-gray-700);
  --input-border-focus: var(--color-cornflower-blue-500);
  --input-border-error: var(--color-crimson-red-600);
  --input-bg-disabled: var(--color-slate-gray-100);
  /* Interaction states */
  --state-hover: var(--color-slate-gray-200);
  --state-pressed: var(--color-slate-gray-300);
  --state-hover-on-dark: var(--overlay-white-8);
  --state-pressed-on-dark: var(--overlay-white-16);
  --state-selected-bg: var(--color-cornflower-blue-200);
  --state-selected-border: var(--color-cornflower-blue-500);
  /* Feedback messages (banners and inline messages) */
  --success-bg: var(--color-success-green-100);
  --success-border: var(--color-success-green-300);
  --success-icon: var(--color-success-green-600);
  --warning-bg: var(--color-amber-yellow-100);
  --warning-border: var(--color-amber-yellow-300);
  --warning-icon: var(--color-amber-yellow-600);
  --error-bg: var(--color-crimson-red-100);
  --error-border: var(--color-crimson-red-300);
  --error-icon: var(--color-crimson-red-600);
  --info-bg: var(--color-cornflower-blue-100);
  --info-border: var(--color-cornflower-blue-300);
  --info-icon: var(--color-cornflower-blue-600);
  /* Code, badges and highlights */
  --code-bg: var(--color-navy-blue-800);
  --code-text: var(--color-white);
  --code-inline-bg: var(--color-slate-gray-100);
  --code-inline-text: var(--color-slate-gray-900);
  --highlight-bg: var(--color-amber-yellow-200);
  --badge-neutral-bg: var(--color-slate-gray-100);
  --badge-neutral-text: var(--color-slate-gray-700);
  --badge-brand-bg: var(--color-cornflower-blue-100);
  --badge-brand-text: var(--color-cornflower-blue-800);
  /* Overlays and shadows */
  --overlay-scrim: var(--overlay-black-60);
  --shadow-soft: var(--overlay-black-8);
  --shadow-medium: var(--overlay-black-16);
}

/* Per-page accent: add one class to <html> or <body>, then use var(--accent), var(--accent-strong), var(--accent-soft). */
.accent-cornflower-blue { --accent: var(--color-cornflower-blue-500); --accent-strong: var(--color-cornflower-blue-700); --accent-soft: var(--color-cornflower-blue-100); }
.accent-purple-grape { --accent: var(--color-purple-grape-500); --accent-strong: var(--color-purple-grape-700); --accent-soft: var(--color-purple-grape-100); }
.accent-tangerine-orange { --accent: var(--color-tangerine-orange-500); --accent-strong: var(--color-tangerine-orange-700); --accent-soft: var(--color-tangerine-orange-100); }
.accent-glacial-cyan { --accent: var(--color-glacial-cyan-500); --accent-strong: var(--color-glacial-cyan-700); --accent-soft: var(--color-glacial-cyan-100); }
.accent-seafoam-teal { --accent: var(--color-seafoam-teal-500); --accent-strong: var(--color-seafoam-teal-700); --accent-soft: var(--color-seafoam-teal-100); }
.accent-crimson-red { --accent: var(--color-crimson-red-500); --accent-strong: var(--color-crimson-red-700); --accent-soft: var(--color-crimson-red-100); }
.accent-amber-yellow { --accent: var(--color-amber-yellow-500); --accent-strong: var(--color-amber-yellow-700); --accent-soft: var(--color-amber-yellow-100); }
.accent-success-green { --accent: var(--color-success-green-500); --accent-strong: var(--color-success-green-700); --accent-soft: var(--color-success-green-100); }