/*
 * DGA "Platforms Code" design tokens
 *
 * Reverse-extracted from the compiled Tailwind CSS captured from
 * design.dga.gov.sa's home-page template preview export (VPN-only site,
 * saved locally by the client). These are the real computed values from
 * DGA's own build, not hand-matched from screenshots.
 *
 * This file only DEFINES the variables -- nothing on the site changes
 * appearance yet. Theme CSS should be written/updated to reference these
 * (e.g. `color: var(--colors-primary-sa-flag-600-primary)`) instead of
 * hardcoded hex values, so the whole theme stays in sync with DGA's palette.
 *
 * Gaps / not verified:
 *  - Typography scale (font-size/line-height per Display/Heading/Text step)
 *    is NOT included here; DGA compiles these as utility classes, not
 *    variables, and needs a separate pass.
 *  - Responsive root font-size scaling (DGA shrinks html{font-size} at
 *    smaller breakpoints, e.g. 62.5%/60%/58%/55%/50%) was present in the
 *    capture but internally inconsistent (looked like two overlapping
 *    saves merged together) -- deliberately NOT replicated here to avoid
 *    shipping a guess. Flag for follow-up once real VPN/source access
 *    is available.
 *  - Component color tokens (button/tag/form/table/stepper/tooltip/
 *    notification/featuredicons) are included since they were captured
 *    cleanly, but haven't been cross-checked against rendered examples yet.
 */

:root {
  /* Breakpoints (reference only -- CSS custom properties can't be used
     inside @media conditions; use these literal values in @media rules
     or in JS matchMedia calls) */
  --breakpoint-sm: 600px;  /* Mobile: 0-599 */
  --breakpoint-md: 960px;  /* Tablet: 600-959 */
  --breakpoint-lg: 1280px; /* Desktop: 960-1279 */
  /* 1280px+ = X Large Desktop */

  /* Fonts (self-hosted separately in dga-fonts.css) */
  --font-family-arabic: "IBMPlexSansArabic", "Segoe UI", Tahoma, sans-serif;
  --font-family-display: "Saudi", "IBMPlexSansArabic", sans-serif;

  /* Base */
  --colors-base-white: #ffffff;
  --colors-base-black: #161616;

  /* Alpha (translucent black/white) */
  --colors-alpha-white: 0deg 0% 100%;
  --colors-alpha-black: 0deg 0% 0%;
  --colors-alpha-alpha-white-0: #ffffff00;
  --colors-alpha-alpha-white-10: #ffffff19;
  --colors-alpha-alpha-white-20: #ffffff33;
  --colors-alpha-alpha-white-30: #ffffff4c;
  --colors-alpha-alpha-white-40: #ffffff66;
  --colors-alpha-alpha-white-50: #ffffff7f;
  --colors-alpha-alpha-white-60: #ffffff99;
  --colors-alpha-alpha-white-70: #ffffffb2;
  --colors-alpha-alpha-white-80: #ffffffcc;
  --colors-alpha-alpha-white-90: #ffffffe5;
  --colors-alpha-alpha-white-100: #ffffff;
  --colors-alpha-alpha-black-0: #16161600;
  --colors-alpha-alpha-black-10: #16161619;
  --colors-alpha-alpha-black-20: #16161633;
  --colors-alpha-alpha-black-30: #1616164c;
  --colors-alpha-alpha-black-40: #16161666;
  --colors-alpha-alpha-black-50: #1616167f;
  --colors-alpha-alpha-black-60: #16161699;
  --colors-alpha-alpha-black-70: #161616b2;
  --colors-alpha-alpha-black-80: #161616cc;
  --colors-alpha-alpha-black-90: #161616e5;
  --colors-alpha-alpha-black-100: #161616;
  --colors-alpha-alpha-green-10: #1b835419;
  --colors-alpha-alpha-green-20: #1b835433;
  --colors-alpha-alpha-green-30: #1b83544c;
  --colors-alpha-alpha-green-40: #1b835466;
  --colors-alpha-alpha-green-50: #1b83547f;
  --colors-alpha-alpha-green-60: #1b835499;
  --colors-alpha-alpha-green-70: #1b8354b2;
  --colors-alpha-alpha-green-80: #1b8354cc;
  --colors-alpha-alpha-green-90: #1b8354e5;
  --colors-alpha-alpha-green-100: var(--colors-primary-sa-flag-600-primary);
  --alpha-white-0: var(--colors-alpha-alpha-white-0);
  --alpha-white-10: var(--colors-alpha-alpha-white-10);
  --alpha-white-20: var(--colors-alpha-alpha-white-20);
  --alpha-white-30: var(--colors-alpha-alpha-white-30);
  --alpha-white-40: var(--colors-alpha-alpha-white-40);
  --alpha-white-50: var(--colors-alpha-alpha-white-50);
  --alpha-white-60: var(--colors-alpha-alpha-white-60);
  --alpha-white-70: var(--colors-alpha-alpha-white-70);
  --alpha-white-80: var(--colors-alpha-alpha-white-80);
  --alpha-white-90: var(--colors-alpha-alpha-white-90);
  --alpha-white-100: var(--colors-alpha-alpha-white-100);
  --alpha-black-0: var(--colors-alpha-alpha-black-0);
  --alpha-black-10: var(--colors-alpha-alpha-black-10);
  --alpha-black-20: var(--colors-alpha-alpha-black-20);
  --alpha-black-30: var(--colors-alpha-alpha-black-30);
  --alpha-black-40: var(--colors-alpha-alpha-black-40);
  --alpha-black-50: var(--colors-alpha-alpha-black-50);
  --alpha-black-60: var(--colors-alpha-alpha-black-60);
  --alpha-black-70: var(--colors-alpha-alpha-black-70);
  --alpha-black-80: var(--colors-alpha-alpha-black-80);
  --alpha-black-90: var(--colors-alpha-alpha-black-90);
  --alpha-black-100: var(--colors-alpha-alpha-black-100);
  --alpha-primary-10: #1b835419;
  --alpha-primary-20: #1b835433;
  --alpha-warning-10: #dc680319;
  --alpha-warning-20: #dc680333;
  --alpha-error-10: #d92c2019;
  --alpha-error-20: #d92c2033;
  --alpha-info-10: #156fee19;
  --alpha-info-20: #156fee33;
  --alpha-success-10: #06945419;
  --alpha-success-20: #06945433;

  /* Primary brand ramp (Saudi flag green) */
  --colors-primary-sa-flag-25: #f7fdf9;
  --colors-primary-sa-flag-50: #f3fcf6;
  --colors-primary-sa-flag-100: #dff6e7;
  --colors-primary-sa-flag-200: #b8eacb;
  --colors-primary-sa-flag-300: #88d8ad;
  --colors-primary-sa-flag-400: #54c08a;
  --colors-primary-sa-flag-500-alpha-10: #25935f19;
  --colors-primary-sa-flag-500: #25935f;
  --colors-primary-sa-flag-600-primary: #1b8354;
  --colors-primary-sa-flag-700: #166a45;
  --colors-primary-sa-flag-800: #14573a;
  --colors-primary-sa-flag-900: #104631;
  --colors-primary-sa-flag-950: #092a1e;

  /* Secondary brand ramp (gold) */
  --colors-secondary-gold-25: #fffef7;
  --colors-secondary-gold-50: #fffef2;
  --colors-secondary-gold-100: #fffce6;
  --colors-secondary-gold-200: #fcf3bd;
  --colors-secondary-gold-300: #fae996;
  --colors-secondary-gold-400: #f7d54d;
  --colors-secondary-gold-500: #f5bd02;
  --colors-secondary-gold-600-primary: #dba102;
  --colors-secondary-gold-700: #b87b02;
  --colors-secondary-gold-800: #945c01;
  --colors-secondary-gold-900: #6e3c00;
  --colors-secondary-gold-950: #472400;

  /* Tertiary brand ramp (lavender) */
  --colors-tertiary-lavendar-25: #fefcff;
  --colors-tertiary-lavendar-50: #f9f5fa;
  --colors-tertiary-lavendar-100: #f2e9f5;
  --colors-tertiary-lavendar-200: #e1cce8;
  --colors-tertiary-lavendar-300: #ccadd9;
  --colors-tertiary-lavendar-400: #a57bba;
  --colors-tertiary-lavendar-500-primary: #80519f;
  --colors-tertiary-lavendar-600: #6d428f;
  --colors-tertiary-lavendar-700: #532d75;
  --colors-tertiary-lavendar-800: #3d1d5e;
  --colors-tertiary-lavendar-900: #281047;
  --colors-tertiary-lavendar-950: #16072e;

  /* Brand ramp (Untitled UI base, kept for reference) */
  --colors-brand-25: #f7fdf9;
  --colors-brand-50: #f3fcf6;
  --colors-brand-100: #dff6e7;
  --colors-brand-200: #b8eacb;
  --colors-brand-300: #88d8ad;
  --colors-brand-400: #54c08a;
  --colors-brand-500: #25935f;
  --colors-brand-600: #1b8354;
  --colors-brand-700: #166a45;
  --colors-brand-800: #14573a;
  --colors-brand-900: #104631;
  --colors-brand-950: #092a1e;

  /* Neutral ramp (actual working gray) */
  --colors-neutral-25: #fcfcfd;
  --colors-neutral-50: #f9fafb;
  --colors-neutral-100: #f3f4f6;
  --colors-neutral-200: #e5e7eb;
  --colors-neutral-300: #d2d6db;
  --colors-neutral-400: #9da4ae;
  --colors-neutral-500: #6c727e;
  --colors-neutral-600: #4d5761;
  --colors-neutral-700: #384250;
  --colors-neutral-800: #1f2a37;
  --colors-neutral-900: #111927;
  --colors-neutral-950: #0c111b;

  /* Gray ramp variants (library extras, mostly unused) */
  --colors-gray-25: #fafafa;
  --colors-gray-50: #f5f5f6;
  --colors-gray-100: #f0f1f1;
  --colors-gray-200: #ececed;
  --colors-gray-300: #cecfd2;
  --colors-gray-400: #94969c;
  --colors-gray-500: #85888e;
  --colors-gray-600: #61646c;
  --colors-gray-800: #1f242f;
  --colors-gray-900: #161b26;
  --colors-gray-700: #333741;
  --colors-gray-950: #0c111d;
  --colors-gray-blue-25: #fcfcfd;
  --colors-gray-blue-50: #f8f9fc;
  --colors-gray-blue-100: #eaecf5;
  --colors-gray-blue-200: #d5d9eb;
  --colors-gray-blue-300: #b3b8db;
  --colors-gray-blue-400: #717bbc;
  --colors-gray-blue-500: #4e5ba6;
  --colors-gray-blue-600: #3e4784;
  --colors-gray-blue-700: #363f72;
  --colors-gray-blue-800: #293056;
  --colors-gray-blue-900: #101323;
  --colors-gray-blue-950: #0d0f1c;
  --colors-gray-cool-25: #fcfcfd;
  --colors-gray-cool-50: #f9f9fb;
  --colors-gray-cool-100: #eff1f5;
  --colors-gray-cool-200: #dcdfea;
  --colors-gray-cool-300: #b9c0d4;
  --colors-gray-cool-400: #7d89b0;
  --colors-gray-cool-500: #5d6b98;
  --colors-gray-cool-600: #4a5578;
  --colors-gray-cool-700: #404968;
  --colors-gray-cool-800: #30374f;
  --colors-gray-cool-900: #111322;
  --colors-gray-cool-950: #0e101b;
  --colors-gray-modern-25: #fcfcfd;
  --colors-gray-modern-50: #f8fafc;
  --colors-gray-modern-100: #eef2f6;
  --colors-gray-modern-200: #e3e8ef;
  --colors-gray-modern-300: #cdd5df;
  --colors-gray-modern-400: #9aa4b2;
  --colors-gray-modern-500: #697586;
  --colors-gray-modern-600: #4b5565;
  --colors-gray-modern-700: #364152;
  --colors-gray-modern-800: #202939;
  --colors-gray-modern-900: #121926;
  --colors-gray-modern-950: #0d121c;
  --colors-gray-neutral-25: #fcfcfd;
  --colors-gray-neutral-50: #f9fafb;
  --colors-gray-neutral-100: #f3f4f6;
  --colors-gray-neutral-200: #e5e7eb;
  --colors-gray-neutral-300: #d2d6db;
  --colors-gray-neutral-400: #9da4ae;
  --colors-gray-neutral-500: #6c737f;
  --colors-gray-neutral-600: #4d5761;
  --colors-gray-neutral-700: #384250;
  --colors-gray-neutral-800: #1f2a37;
  --colors-gray-neutral-900: #111927;
  --colors-gray-neutral-950: #0d121c;
  --colors-gray-iron-25: #fcfcfc;
  --colors-gray-iron-50: #fafafa;
  --colors-gray-iron-100: #f4f4f5;
  --colors-gray-iron-200: #e4e4e7;
  --colors-gray-iron-300: #d1d1d6;
  --colors-gray-iron-400: #a0a0ab;
  --colors-gray-iron-500: #70707b;
  --colors-gray-iron-600: #51525c;
  --colors-gray-iron-700: #3f3f46;
  --colors-gray-iron-800: #26272b;
  --colors-gray-iron-900: #1a1a1e;
  --colors-gray-iron-950: #131316;
  --colors-gray-true-25: #fcfcfc;
  --colors-gray-true-50: #fafafa;
  --colors-gray-true-100: #f5f5f5;
  --colors-gray-true-200: #e5e5e5;
  --colors-gray-true-300: #d6d6d6;
  --colors-gray-true-400: #a3a3a3;
  --colors-gray-true-500: #737373;
  --colors-gray-true-600: #525252;
  --colors-gray-true-700: #424242;
  --colors-gray-true-800: #292929;
  --colors-gray-true-900: #141414;
  --colors-gray-true-950: #0f0f0f;
  --colors-gray-warm-25: #fdfdfc;
  --colors-gray-warm-50: #fafaf9;
  --colors-gray-warm-100: #f5f5f4;
  --colors-gray-warm-200: #e7e5e4;
  --colors-gray-warm-300: #d7d3d0;
  --colors-gray-warm-400: #a9a29d;
  --colors-gray-warm-500: #79716b;
  --colors-gray-warm-600: #57534e;
  --colors-gray-warm-700: #44403c;
  --colors-gray-warm-800: #292524;
  --colors-gray-warm-900: #1c1917;
  --colors-gray-warm-950: #171412;
  --colors-gray-1000: #161616;

  /* Status ramps: error / warning / success / info */
  --colors-error-25: #fffbfa;
  --colors-error-50: #fef3f2;
  --colors-error-100: #fee4e2;
  --colors-error-200: #fecdca;
  --colors-error-300: #fda29b;
  --colors-error-400: #f97066;
  --colors-error-500: #f04438;
  --colors-error-600: #d92d20;
  --colors-error-700: #b42318;
  --colors-error-800: #912018;
  --colors-error-900: #7a271a;
  --colors-error-950: #55160c;
  --colors-warning-25: #fffcf5;
  --colors-warning-50: #fffaeb;
  --colors-warning-100: #fef0c7;
  --colors-warning-200: #fedf89;
  --colors-warning-300: #fec84b;
  --colors-warning-400: #fdb022;
  --colors-warning-500: #f79009;
  --colors-warning-600: #dc6803;
  --colors-warning-700: #b54708;
  --colors-warning-800: #93370d;
  --colors-warning-900: #7a2e0e;
  --colors-warning-950: #4e1d09;
  --colors-success-25: #f6fef9;
  --colors-success-50: #ecfdf3;
  --colors-success-100: #dcfae6;
  --colors-success-200: #abefc6;
  --colors-success-300: #75e0a7;
  --colors-success-400: #47cd89;
  --colors-success-500: #17b26a;
  --colors-success-600: #079455;
  --colors-success-700: #067647;
  --colors-success-800: #085d3a;
  --colors-success-900: #074d31;
  --colors-success-950: #053321;
  --colors-info-25: #f5faff;
  --colors-info-50: #eff8ff;
  --colors-info-100: #d1e9ff;
  --colors-info-200: #b2ddff;
  --colors-info-300: #84caff;
  --colors-info-400: #53b1fd;
  --colors-info-500: #2e90fa;
  --colors-info-600: #1570ef;
  --colors-info-700: #175cd3;
  --colors-info-800: #1849a9;
  --colors-info-900: #194185;
  --colors-info-950: #102a56;

  /* Extended color library (moss/green/teal/cyan/blue/red/indigo/violet/purple/fuchsia/pink/orange/yellow) */
  --colors-moss-25: #fafdf7;
  --colors-moss-50: #f5fbee;
  --colors-moss-100: #e6f4d7;
  --colors-moss-200: #ceeab0;
  --colors-moss-300: #acdc79;
  --colors-moss-400: #86cb3c;
  --colors-moss-500: #669f2a;
  --colors-moss-600: #4f7a21;
  --colors-moss-700: #3f621a;
  --colors-moss-800: #335015;
  --colors-moss-900: #2b4212;
  --colors-moss-950: #1a280b;
  --colors-green-light-25: #fafef5;
  --colors-green-light-50: #f3fee7;
  --colors-green-light-100: #e3fbcc;
  --colors-green-light-200: #d0f8ab;
  --colors-green-light-300: #a6ef67;
  --colors-green-light-400: #85e13a;
  --colors-green-light-500: #66c61c;
  --colors-green-light-600: #4ca30d;
  --colors-green-light-700: #3b7c0f;
  --colors-green-light-800: #326212;
  --colors-green-light-900: #2b5314;
  --colors-green-light-950: #15290a;
  --colors-green-25: #f6fef9;
  --colors-green-50: #ecfdf3;
  --colors-green-100: #dcfae6;
  --colors-green-200: #abefc6;
  --colors-green-300: #75dfa6;
  --colors-green-400: #47cd89;
  --colors-green-500: #17b169;
  --colors-green-600: #069454;
  --colors-green-700: #067647;
  --colors-green-800: #085d3a;
  --colors-green-900: #074c30;
  --colors-green-950: #053321;
  --colors-Teal-25: #f6fefc;
  --colors-Teal-50: #f0fdf9;
  --colors-Teal-100: #ccfbef;
  --colors-Teal-200: #99f6e0;
  --colors-Teal-300: #5fe9d0;
  --colors-Teal-400: #2ed3b7;
  --colors-Teal-500: #15b79e;
  --colors-Teal-600: #0e9384;
  --colors-Teal-700: #107569;
  --colors-Teal-800: #125d56;
  --colors-Teal-900: #134e48;
  --colors-Teal-950: #0a2926;
  --colors-cyan-25: #f5feff;
  --colors-cyan-50: #ecfdff;
  --colors-cyan-100: #cff9fe;
  --colors-cyan-200: #a5f0fc;
  --colors-cyan-300: #67e3f9;
  --colors-cyan-400: #22ccee;
  --colors-cyan-500: #06aed4;
  --colors-cyan-600: #088ab2;
  --colors-cyan-700: #0e7090;
  --colors-cyan-800: #155b75;
  --colors-cyan-900: #164c63;
  --colors-cyan-950: #0d2d3a;
  --colors-blue-light-25: #f5fbff;
  --colors-blue-light-50: #f0f9ff;
  --colors-blue-light-100: #e0f2fe;
  --colors-blue-light-200: #b9e6fe;
  --colors-blue-light-300: #7cd4fd;
  --colors-blue-light-400: #36bffa;
  --colors-blue-light-500: #0ba5ec;
  --colors-blue-light-600: #0086c9;
  --colors-blue-light-700: #026aa2;
  --colors-blue-light-800: #065986;
  --colors-blue-light-900: #0b4a6f;
  --colors-blue-light-950: #062c41;
  --colors-blue-dark-25: #f5f8ff;
  --colors-blue-dark-50: #eff4ff;
  --colors-blue-dark-100: #d1e0ff;
  --colors-blue-dark-200: #b2ccff;
  --colors-blue-dark-300: #84adff;
  --colors-blue-dark-400: #528bff;
  --colors-blue-dark-500: #2970ff;
  --colors-blue-dark-600: #155eef;
  --colors-blue-dark-700: #004eeb;
  --colors-blue-dark-800: #0040c1;
  --colors-blue-dark-900: #00359e;
  --colors-blue-dark-950: #002266;
  --colors-indigo-25: #f5f8ff;
  --colors-indigo-50: #eef4ff;
  --colors-indigo-100: #e0eaff;
  --colors-indigo-200: #c7d7fe;
  --colors-indigo-300: #a4bcfd;
  --colors-indigo-400: #8098f9;
  --colors-indigo-500: #6172f3;
  --colors-indigo-600: #444ce7;
  --colors-indigo-700: #3538cd;
  --colors-indigo-800: #2d31a6;
  --colors-indigo-900: #2d3282;
  --colors-indigo-950: #1f235b;
  --colors-violet-25: #fbfaff;
  --colors-violet-50: #f5f3ff;
  --colors-violet-100: #ece9fe;
  --colors-violet-200: #ddd6fe;
  --colors-violet-300: #c3b5fd;
  --colors-violet-400: #a48afb;
  --colors-violet-500: #875bf7;
  --colors-violet-600: #7839ee;
  --colors-violet-700: #6927da;
  --colors-violet-800: #5720b7;
  --colors-violet-900: #491c96;
  --colors-violet-950: #2e125e;
  --colors-purple-25: #fafaff;
  --colors-purple-50: #f4f3ff;
  --colors-purple-100: #ebe9fe;
  --colors-purple-200: #d9d6fe;
  --colors-purple-300: #bdb4fe;
  --colors-purple-400: #9b8afb;
  --colors-purple-500: #7a5af8;
  --colors-purple-600: #6938ef;
  --colors-purple-700: #5925dc;
  --colors-purple-800: #4a1fb8;
  --colors-purple-900: #3e1c96;
  --colors-purple-950: #27115f;
  --colors-fuchsia-25: #fefaff;
  --colors-fuchsia-50: #fdf4ff;
  --colors-fuchsia-100: #fbe8ff;
  --colors-fuchsia-200: #f6d0fe;
  --colors-fuchsia-300: #eeaafd;
  --colors-fuchsia-400: #e478fa;
  --colors-fuchsia-500: #d444f1;
  --colors-fuchsia-600: #ba24d5;
  --colors-fuchsia-700: #9f1ab1;
  --colors-fuchsia-800: #821890;
  --colors-fuchsia-900: #6f1877;
  --colors-fuchsia-950: #47104c;
  --colors-pink-25: #fef6fb;
  --colors-pink-50: #fdf2fa;
  --colors-pink-100: #fce7f6;
  --colors-pink-200: #fcceee;
  --colors-pink-300: #faa7e0;
  --colors-pink-400: #f670c7;
  --colors-pink-500: #ee46bc;
  --colors-pink-600: #dd2590;
  --colors-pink-700: #c11574;
  --colors-pink-800: #9e165f;
  --colors-pink-900: #851651;
  --colors-pink-950: #4e0d30;
  --colors-orange-dark-25: #fff9f5;
  --colors-orange-dark-50: #fff4ed;
  --colors-orange-dark-100: #ffe6d5;
  --colors-orange-dark-200: #ffd6ae;
  --colors-orange-dark-300: #ff9c66;
  --colors-orange-dark-400: #ff692e;
  --colors-orange-dark-500: #ff4405;
  --colors-orange-dark-600: #e62e05;
  --colors-orange-dark-700: #bc1b06;
  --colors-orange-dark-800: #97180c;
  --colors-orange-dark-900: #771a0d;
  --colors-orange-dark-950: #57130a;
  --colors-orange-25: #fefaf5;
  --colors-orange-50: #fef6ee;
  --colors-orange-100: #fdead7;
  --colors-orange-200: #f9dbaf;
  --colors-orange-300: #f7b27a;
  --colors-orange-400: #f38744;
  --colors-orange-500: #ef6820;
  --colors-orange-600: #e04f16;
  --colors-orange-700: #b93815;
  --colors-orange-800: #932f19;
  --colors-orange-900: #772917;
  --colors-orange-950: #511c10;
  --colors-yellow-25: #fffcf5;
  --colors-yellow-50: #fffaeb;
  --colors-yellow-100: #fef0c7;
  --colors-yellow-200: #fedf89;
  --colors-yellow-300: #fec84b;
  --colors-yellow-400: #fdb022;
  --colors-yellow-500: #f79009;
  --colors-yellow-600: #dc6803;
  --colors-yellow-700: #b54707;
  --colors-yellow-800: #93370c;
  --colors-yellow-900: #7a2e0e;
  --colors-yellow-950: #4e1d09;
  --colors-blue-25: #f5faff;
  --colors-blue-50: #eff8ff;
  --colors-blue-100: #d1e9ff;
  --colors-blue-200: #b2ddff;
  --colors-blue-300: #84caff;
  --colors-blue-400: #53b0fd;
  --colors-blue-500: #2e90fa;
  --colors-blue-600: #156fee;
  --colors-blue-700: #175cd3;
  --colors-blue-800: #1849a9;
  --colors-blue-900: #194084;
  --colors-blue-950: #102a56;
  --colors-red-25: #fffbfa;
  --colors-red-50: #fef3f2;
  --colors-red-100: #fee4e2;
  --colors-red-200: #fecdca;
  --colors-red-300: #fca19b;
  --colors-red-400: #f97066;
  --colors-red-500: #f04437;
  --colors-red-600: #d92c20;
  --colors-red-700: #b42318;
  --colors-red-800: #912018;
  --colors-red-900: #7a2619;
  --colors-red-950: #54150c;

  /* Text / border / fg semantic colors */
  --colors-text-primary: var(--colors-gray-900);
  --colors-text-primary_on-brand: var(--colors-base-white);
  --colors-text-secondary: var(--colors-gray-700);
  --colors-text-secondary_on-brand: hsla(var(--colors-alpha-white) / 70%);
  --colors-text-tertiary: var(--colors-gray-600);
  --colors-text-quarterary: var(--colors-gray-500);
  --colors-text-white: var(--colors-base-white);
  --colors-text-disabled: var(--colors-gray-500);
  --colors-text-placeholder: var(--colors-gray-500);
  --colors-text-brand-primary: var(--colors-brand-800);
  --colors-text-brand-secondary: var(--colors-brand-700);
  --colors-text-error-primary: var(--colors-error-600);
  --colors-border-primary: var(--colors-gray-300);
  --colors-border-secondary: var(--colors-gray-200);
  --colors-border-disabled: var(--colors-gray-300);
  --colors-border-disabled_subtle: var(--colors-gray-200);
  --colors-border-brand: var(--colors-brand-300);
  --colors-border-error: var(--colors-error-300);
  --colors-fg-primary: var(--colors-gray-900);
  --colors-fg-quinary-400: var(--colors-gray-400);
  --colors-fg-tertiary-600: var(--colors-gray-600);

  /* Gradients */
  --gradient-gray-600-500-90deg: linear-gradient( 90deg, var(--colors-gray-600) 0%, var(--colors-gray-500) 100% );
  --gradient-gray-700-600-45deg: linear-gradient( 45deg, var(--colors-gray-700) 0%, var(--colors-gray-600) 100% );
  --gradient-gray-800-600-45deg: linear-gradient( 45deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100% );
  --gradient-gray-800-600-90deg: linear-gradient( 90deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100% );
  --gradient-gray-800-700-26-5deg: linear-gradient( 26.5deg, var(--colors-gray-600) 0%, var(--colors-gray-700) 100% );
  --gradient-gray-900-600-45deg: linear-gradient( 45deg, var(--colors-gray-900) 0%, var(--colors-gray-600) 100% );
  --gradient-brand-600-500-90deg: linear-gradient( 90deg, var(--colors-brand-600) 0%, var(--colors-brand-500) 100% );
  --gradient-brand-700-600-45deg: linear-gradient( 45deg, var(--colors-brand-700) 0%, var(--colors-brand-600) 100% );
  --gradient-brand-800-600-45deg: linear-gradient( 45deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100% );
  --gradient-brand-800-600-90deg: linear-gradient( 90deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100% );
  --gradient-brand-800-700-26-5deg: linear-gradient( 26.5deg, var(--colors-brand-600) 0%, var(--colors-brand-700) 100% );
  --gradient-brand-900-600-45deg: linear-gradient( 45deg, var(--colors-brand-900) 0%, var(--colors-brand-600) 100% );

  /* Spacing scale (numeric, px) */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-40: 160px;
  --spacing-48: 192px;
  --spacing-56: 224px;
  --spacing-64: 256px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-120: 480px;
  --spacing-140: 560px;
  --spacing-160: 640px;
  --spacing-180: 720px;
  --spacing-192: 768px;
  --spacing-256: 1024px;
  --spacing-320: 1280px;
  --spacing-360: 1440px;
  --spacing-400: 1600px;
  --spacing-480: 1920px;
  --spacing-0-5: 2px;
  --spacing-1-5: 6px;

  /* Spacing scale (named) */
  --spacing-none: var(--spacing-0);
  /* Client report: "Was this page helpful?" Yes/No buttons touching with
     no gap. Root cause: these two named aliases referenced a corrupted
     token name -- `--spacing-0․5`/`--spacing-1․5` used a Unicode "one dot
     leader" (U+2024, likely pasted from a design-tool export) instead of
     the real token names' hyphen (`--spacing-0-5`/`--spacing-1-5`), so the
     var() reference silently failed to resolve and every consumer of
     --spacing-xxs/--spacing-sm (including .dga-page-helpful__buttons'
     `gap`) got no value at all instead of falling back to anything. */
  --spacing-xxs: var(--spacing-0-5);
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-1-5);
  --spacing-md: var(--spacing-2);
  --spacing-lg: var(--spacing-3);
  --spacing-xl: var(--spacing-4);
  --spacing-2xl: var(--spacing-5);
  --spacing-3xl: var(--spacing-6);
  --spacing-4xl: var(--spacing-8);
  --spacing-5xl: var(--spacing-10);
  --spacing-6xl: var(--spacing-12);
  --spacing-7xl: var(--spacing-16);
  --spacing-8xl: var(--spacing-20);
  --spacing-9xl: var(--spacing-24);
  --spacing-10xl: var(--spacing-32);
  --spacing-11xl: var(--spacing-40);

  /* Sizing: widths / container / paragraph */
  --width-xxs: var(--spacing-80);
  --width-xs: var(--spacing-96);
  --width-sm: var(--spacing-120);
  --width-md: var(--spacing-140);
  --width-lg: var(--spacing-160);
  --width-xl: var(--spacing-192);
  --width-2xl: var(--spacing-256);
  --width-3xl: var(--spacing-320);
  --width-4xl: var(--spacing-360);
  --width-5xl: var(--spacing-400);
  --width-6xl: var(--spacing-480);
  --paragraph-max-width: var(--spacing-180);
  --container-padding-mobile: var(--spacing-4);
  --container-padding-desktop: var(--spacing-8);
  --container-max-width-desktop: var(--spacing-320);

  /* Border radius scale */
  --radius-none: var(--radius-0);
  --radius-xxs: 2px;
  --radius-xs: var(--radius-2);
  --radius-sm: var(--radius-4);
  --radius-md: var(--radius-8);
  --radius-lg: var(--radius-16);
  --radius-xl: var(--radius-24);
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: var(--radius-9999);
  --radius-0: 0;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-9999: 9999px;
  --components-card-radius: var(--spacing-4);

  /* Elevation / shadows */
  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, .05);
  --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, .06), 0px 1px 3px 0px rgba(16, 24, 40, .1);
  --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, .06), 0px 4px 8px -2px rgba(16, 24, 40, .1);
  --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, .03), 0px 12px 16px -4px rgba(16, 24, 40, .08);
  --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, .03), 0px 20px 24px -4px rgba(16, 24, 40, .08);
  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, .18);

  /* Semantic backgrounds */
  --background-white: var(--colors-base-white);
  --background-body: var(--colors-neutral-50);
  --background-menu: var(--colors-base-white);
  --background-card: var(--colors-base-white);
  --background-surface-oncolor: var(--colors-base-white);
  --background-black: var(--colors-base-black);
  --background-brand-light: var(--colors-primary-sa-flag-50);
  --background-neutral-800: var(--colors-neutral-800);
  --background-neutral-400: var(--colors-neutral-400);
  --background-neutral-300: var(--colors-neutral-300);
  --background-neutral-200: var(--colors-neutral-200);
  --background-neutral-100: var(--colors-neutral-100);
  --background-neutral-50: var(--colors-neutral-50);
  --background-neutral-25: var(--colors-neutral-25);
  --background-primary: var(--colors-primary-sa-flag-600-primary);
  --background-primary-400: var(--colors-primary-sa-flag-400);
  --background-primary-200: var(--colors-primary-sa-flag-200);
  --background-primary-50: var(--colors-primary-sa-flag-50);
  --background-primary-25: var(--colors-primary-sa-flag-25);
  --background-secondary: var(--colors-secondary-gold-600-primary);
  --background-secondary-50: var(--colors-secondary-gold-50);
  --background-secondary-25: var(--colors-secondary-gold-25);
  --background-tertiary: var(--colors-tertiary-lavendar-600);
  --background-tertiary-50: var(--colors-tertiary-lavendar-50);
  --background-tertiary-25: var(--colors-tertiary-lavendar-25);
  --background-success: var(--colors-green-600);
  --background-success-light: var(--colors-green-50);
  --background-success-50: var(--colors-green-50);
  --background-success-25: var(--colors-green-25);
  --background-info: var(--colors-blue-600);
  --background-info-light: var(--colors-blue-50);
  --background-info-50: var(--colors-blue-50);
  --background-info-25: var(--colors-blue-25);
  --background-warning: var(--colors-yellow-600);
  --background-warning-light: var(--colors-yellow-50);
  --background-warning-50: var(--colors-yellow-50);
  --background-warning-25: var(--colors-yellow-25);
  --background-error: var(--colors-red-600);
  --background-error-light: var(--colors-red-50);
  --background-error-50: var(--colors-red-50);
  --background-error-25: var(--colors-red-25);
  --background-sa-flag: var(--colors-green-900);
  --background-sa-flag-50: var(--colors-green-50);
  --background-sa-flag-25: var(--colors-green-25);
  --background-notification-white: var(--colors-base-white);
  --background-disabled: var(--colors-neutral-200);
  --background-disabled-primary: var(--colors-primary-sa-flag-200);
  --background-inverse-disabled: var(--colors-neutral-100);

  /* Semantic text colors */
  --text-default: var(--colors-base-black);
  --text-primary: var(--colors-primary-sa-flag-600-primary);
  --text-secondary: var(--colors-secondary-gold-600-primary);
  --text-tertiary: var(--colors-tertiary-lavendar-500-primary);
  --text-primary-sa-flag: var(--colors-primary-sa-flag-800);
  --text-display: var(--colors-neutral-800);
  --text-primary-paragraph: var(--colors-neutral-700);
  --text-secondary-paragraph: var(--colors-neutral-500);
  --text-oncolor-primary: var(--colors-base-white);
  --text-oncolor-secondary: var(--alpha-white-80);
  --text-oncolor-tertiary: var(--alpha-white-70);
  --text-success: var(--colors-green-700);
  --text-info: var(--colors-blue-700);
  --text-warning: var(--colors-yellow-700);
  --text-error: var(--colors-red-700);
  --text-primary-light: var(--colors-primary-sa-flag-300);
  --text-secondary-light: var(--colors-secondary-gold-300);
  --text-tertiary-light: var(--colors-tertiary-lavendar-300);
  --text-default-disabled: var(--colors-neutral-400);
  --text-default-oncolor-disabled: var(--alpha-white-40);

  /* Semantic borders */
  --border-white: var(--colors-base-white);
  --border-white-40: var(--alpha-white-40);
  --border-black: var(--colors-base-black);
  --border-primary: var(--colors-primary-sa-flag-600-primary);
  --border-primary-light: var(--colors-primary-sa-flag-200);
  --border-secondary: var(--colors-secondary-gold-600-primary);
  --border-secondary-light: var(--colors-secondary-gold-200);
  --border-tertiary: var(--colors-tertiary-lavendar-500-primary);
  --border-tertiary-light: var(--colors-tertiary-lavendar-200);
  --border-neutral-primary: var(--colors-neutral-300);
  --border-neutral-secondary: var(--colors-neutral-200);
  --border-neutral-tertiary: var(--colors-neutral-100);
  --border-background-white: var(--colors-neutral-100);
  --border-background-neutral: var(--colors-neutral-300);
  --border-transparent-10: var(--alpha-white-10);
  --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30);
  --border-success: var(--colors-green-700);
  --border-success-light: var(--colors-green-200);
  --border-info: var(--colors-blue-700);
  --border-info-light: var(--colors-blue-200);
  --border-warning: var(--colors-yellow-700);
  --border-warning-light: var(--colors-yellow-200);
  --border-error: var(--colors-red-700);
  --border-error-light: var(--colors-red-200);
  --border-disabled: var(--colors-neutral-400);

  /* Semantic icons */
  --icon-oncolor: var(--colors-base-white);
  --icon-default: var(--colors-base-black);
  --icon-default-500: var(--colors-neutral-500);
  --icon-default-400: var(--colors-neutral-400);
  --icon-primary: var(--colors-primary-sa-flag-600-primary);
  --icon-primary-light: var(--colors-primary-sa-flag-50);
  --icon-primary-400: var(--colors-primary-sa-flag-400);
  --icon-neutral: var(--colors-neutral-700);
  --icon-neutral-light: var(--colors-neutral-50);
  --icon-secondary: var(--colors-secondary-gold-600-primary);
  --icon-secondary-light: var(--colors-secondary-gold-50);
  --icon-tertiary: var(--colors-tertiary-lavendar-500-primary);
  --icon-tertiary-light: var(--colors-tertiary-lavendar-50);
  --icon-success: var(--colors-green-700);
  --icon-success-light: var(--colors-green-50);
  --icon-info: var(--colors-blue-700);
  --icon-info-light: var(--colors-blue-50);
  --icon-warning: var(--colors-yellow-700);
  --icon-warning-light: var(--colors-yellow-50);
  --icon-error: var(--colors-red-700);
  --icon-error-light: var(--colors-red-50);
  --icon-default-disabled: var(--colors-neutral-400);
  --icon-default-oncolor-disabled: var(--colors-alpha-alpha-white-40);

  /* Component: cards */
  --card-lg-gap: var(--spacing-6);

  /* Component: buttons */
  --buttons-lg-gap: var(--spacing-1);
  --buttons-lg-padding: var(--spacing-4);
  --buttons-md-padding: var(--spacing-3);
  --buttons-sm-padding: var(--spacing-2);
  --button-background-black-default: var(--colors-neutral-950);
  --button-background-black-hovered: var(--colors-neutral-800);
  --button-background-black-pressed: var(--colors-neutral-600);
  --button-background-black-selected: var(--colors-neutral-700);
  --button-background-black-focused: var(--colors-neutral-950);
  /* Client's final direction (2026-09-06), after trying brighter (500) and
     then extreme-contrast (500->950) hover per earlier feedback: match the
     reference site's own button exactly rather than keep pushing for max
     visibility. Their compiled CSS uses #1b8354 default / #166a45 hover --
     the same hex as this project's own sa-flag-600/700 tokens. */
  --button-background-primary-default: var(--colors-primary-sa-flag-600-primary);
  --button-background-primary-hovered: var(--colors-primary-sa-flag-700);
  --button-background-primary-pressed: var(--colors-primary-sa-flag-900);
  --button-background-primary-selected: var(--colors-primary-sa-flag-800);
  --button-background-primary-focused: var(--colors-primary-sa-flag-600-primary);
  --button-background-neutral-default: var(--colors-neutral-100);
  --button-background-neutral-hovered: var(--colors-neutral-100);
  --button-background-neutral-pressed: var(--colors-neutral-200);
  --button-background-neutral-selected: var(--colors-neutral-200);
  --button-background-neutral-focused: var(--colors-neutral-100);
  --button-background-danger-primary-default: var(--colors-red-600);
  --button-background-danger-primary-hovered: var(--colors-red-700);
  --button-background-danger-primary-pressed: var(--colors-red-900);
  --button-background-danger-primary-selected: var(--colors-red-800);
  --button-background-danger-primary-focused: var(--colors-red-600);
  --button-label-danger-primary-default-oncolor: var(--colors-red-200);
  --button-label-danger-primary-hovered-oncolor: var(--colors-red-300);
  --button-label-danger-primary-pressed-oncolor: var(--colors-red-400);
  --button-background-danger-secondary-default: var(--colors-red-50);
  --button-background-danger-secondary-hovered: var(--colors-red-100);
  --button-background-danger-secondary-pressed: var(--colors-red-200);
  --button-background-danger-secondary-selected: var(--colors-red-50);
  --button-background-danger-secondary-focused: var(--colors-red-50);
  --button-background-oncolor-default: var(--colors-base-white);
  --button-background-oncolor-hovered: var(--alpha-white-80);
  --button-background-oncolor-pressed: var(--alpha-white-60);
  --button-background-oncolor-selected: var(--alpha-white-70);
  --button-background-oncolor-focused: var(--alpha-white-100);
  --button-background-transparent-default: var(--alpha-white-0);
  --button-background-transparent-hovered: var(--alpha-white-20);
  --button-background-transparent-pressed: var(--alpha-white-40);
  --button-background-transparent-selected: var(--alpha-white-30);
  --button-background-transparent-focused: var(--alpha-white-0);
  --button-background-disabled-on-color: var(--alpha-white-20);
  --button-label-transparent-hovered-on-color: var(--colors-primary-sa-flag-400);
  --button-label-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
  --button-label-transparent-selected-on-color: var(--colors-primary-sa-flag-400);
  --button-icon-transparent-hovered-on-color: var(--background-primary-400);
  --button-icon-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
  --button-icon-transparent-selected-on-color: var(--colors-primary-sa-flag-400);

  /* Component: links */
  --link-primary: var(--colors-primary-sa-flag-600-primary);
  --link-primary-hovered: var(--colors-primary-sa-flag-400);
  --link-primary-pressed: var(--colors-primary-sa-flag-300);
  --link-primary-focused: var(--colors-primary-sa-flag-600-primary);
  --link-primary-visited: var(--colors-primary-sa-flag-800);
  --link-icon-primary-hovered: var(--colors-primary-sa-flag-400);
  --link-icon-primary-pressed: var(--colors-primary-sa-flag-300);
  --link-icon-primary-focused: var(--colors-primary-sa-flag-600-primary);
  --link-icon-primary-visited: var(--colors-primary-sa-flag-800);
  --link-secondary: var(--colors-secondary-gold-600-primary);
  --link-secondary-hovered: var(--colors-secondary-gold-400);
  --link-secondary-pressed: var(--colors-secondary-gold-300);
  --link-secondary-focused: var(--colors-secondary-gold-600-primary);
  --link-secondary-visited: var(--colors-secondary-gold-900);
  --link-tertiary: var(--colors-tertiary-lavendar-500-primary);
  --link-tertiary-hovered: var(--colors-tertiary-lavendar-400);
  --link-tertiary-pressed: var(--colors-tertiary-lavendar-300);
  --link-tertiary-focused: var(--colors-tertiary-lavendar-500-primary);
  --link-tertiary-visited: var(--colors-tertiary-lavendar-800);
  --link-neutral: var(--colors-neutral-700);
  --link-neutral-hovered: var(--colors-neutral-500);
  --link-icon-neutral-hovered: var(--colors-neutral-500);
  --link-neutral-pressed: var(--colors-neutral-400);
  --link-icon-neutral-pressed: var(--colors-neutral-400);
  --link-neutral-focused: var(--colors-neutral-700);
  --link-icon-neutral-focused: var(--colors-neutral-700);
  --link-neutral-visited: var(--colors-neutral-600);
  --link-icon-neutral-visited: var(--colors-neutral-600);
  --link-danger: var(--colors-red-600);
  --link-danger-hovered: var(--colors-red-700);
  --link-icon-danger-hovered: var(--colors-red-700);
  --link-danger-pressed: var(--colors-red-900);
  --link-icon-danger-pressed: var(--colors-red-900);
  --link-danger-focused: var(--colors-red-600);
  --link-icon-danger-focused: var(--colors-red-600);
  --link-danger-visited: var(--colors-red-800);
  --link-icon-danger-visited: var(--colors-red-800);
  --link-oncolor: var(--colors-base-white);
  --link-oncolor-hovered: var(--colors-alpha-alpha-white-80);
  --link-icon-oncolor-hovered: var(--alpha-white-80);
  --link-oncolor-pressed: var(--colors-alpha-alpha-white-60);
  --link-icon-oncolor-pressed: var(--alpha-white-60);
  --link-oncolor-focused: var(--colors-base-white);
  --link-link-oncolor-focused: var(--colors-base-white);
  --link-oncolor-visited: var(--colors-alpha-alpha-white-90);
  --link-icon-oncolor-visited: var(--alpha-white-90);
  --link-oncolor-disabled: var(--colors-alpha-alpha-white-30);
  --link-icon-oncolor-disabled: var(--alpha-white-30);

  /* Component: tags/chips */
  --tag-background-neutral: var(--colors-neutral-600);
  --tag-background-neutral-light: var(--colors-neutral-50);
  --tag-background-on-color: var(--colors-alpha-alpha-white-20);
  --tag-text-neutral: var(--colors-neutral-800);
  --tag-text-success: var(--colors-green-800);
  --tag-text-info: var(--colors-blue-800);
  --tag-text-warning: var(--colors-yellow-800);
  --tag-text-error: var(--colors-red-800);
  --tag-icon-neutral: var(--colors-neutral-800);
  --tag-icon-success: var(--colors-green-800);
  --tag-icon-info: var(--colors-blue-800);
  --tag-icon-warning: var(--colors-yellow-800);
  --tag-icon-error: var(--colors-red-800);
  --tag-background-success: var(--colors-green-700);
  --tag-background-success-light: var(--colors-green-50);
  --tag-background-info: var(--colors-blue-600);
  --tag-background-info-light: var(--colors-blue-50);
  --tag-background-warning: var(--colors-yellow-700);
  --tag-background-warning-light: var(--colors-yellow-50);
  --tag-background-error: var(--colors-red-600);
  --tag-background-error-light: var(--colors-red-50);
  --tag-border-neutral: var(--colors-neutral-600);
  --tag-border-neutral-light: var(--colors-neutral-50);
  --tag-border-on-color: var(--colors-alpha-alpha-white-60);
  --tag-border-success: var(--colors-green-700);
  --tag-border-success-light: var(--colors-green-200);
  --tag-border-info: var(--colors-blue-700);
  --tag-border-info-light: var(--colors-blue-200);
  --tag-border-warning: var(--colors-yellow-700);
  --tag-border-warning-light: var(--colors-yellow-200);
  --tag-border-error: var(--colors-red-700);
  --tag-border-error-light: var(--colors-red-200);
  --tag-dot: var(--colors-alpha-alpha-white-60);

  /* Component: forms & controls */
  --form-text-form-title: var(--text-default);
  --controls-control-primary: var(--alpha-white-0);
  --controls-control-primary-checked: var(--colors-primary-sa-flag-600-primary);
  --controls-control-primary-hovered: var(--colors-primary-sa-flag-800);
  --controls-control-primary-pressed: var(--colors-primary-sa-flag-800);
  --controls-control-primary-focused: var(--colors-primary-sa-flag-600-primary);
  --controls-control-neutral-checked: var(--colors-neutral-950);
  --controls-control-neutral-hovered: var(--colors-neutral-600);
  --controls-control-neutral-pressed: var(--colors-neutral-600);
  --controls-control-neutral-focused: var(--colors-neutral-950);
  --controls-control-primary--readonly: var(--alpha-white-0);
  --controls-control-pressed: var(--colors-neutral-300);
  --controls-control-ripple-effect: var(--colors-neutral-200);
  --controls-control-border: var(--colors-neutral-500);
  --form-text-form-paragraph: var(--text-secondary-paragraph);
  --form-field-text-label: var(--text-default);
  --form-field-text-placeholder: var(--text-secondary-paragraph);
  --form-field-text-hovered: var(--text-default);
  --form-field-text-focused: var(--text-primary-paragraph);
  --form-field-text-pressed: var(--text-primary-paragraph);
  --form-field-text-filled: var(--text-default);
  --form-field-text-readonly: var(--text-default);
  --form-field-text-helper: var(--text-secondary-paragraph);
  --form-field-background-default: var(--background-card);
  --form-field-background-lighter: var(--colors-neutral-25);
  --form-field-background-darker: var(--colors-neutral-100);
  --form-field-background-pressed: var(--colors-neutral-100);
  --form-field-border-default: var(--colors-neutral-400);
  --form-field-border-hovered: var(--colors-neutral-700);
  --form-field-border-pressed: var(--colors-neutral-950);
  --form-field-border-error: var(--border-error);
  --form-option-background-hover: var(--colors-neutral-100);
  --form-option-background-pressed: var(--colors-neutral-200);
  --form-datecell-background-default: var(--colors-primary-sa-flag-600-primary);
  --form-datecell-background-hovered: var(--colors-primary-sa-flag-700);
  --form-datecell-background-pressed: var(--colors-primary-sa-flag-900);
  --form-datecell-background-focused: var(--colors-primary-sa-flag-600-primary);
  --form-datecell-today-background-default: var(--alpha-white-0);
  --form-datecell-today-background-hovered: var(--colors-neutral-200);
  --form-datecell-today-background-pressed: var(--colors-neutral-300);
  --form-datecell-today-background-focused: var(--alpha-white-0);
  --form-datecell-background-disabled: #ffffff;
  --form-datecell-background-600: var(--colors-primary-sa-flag-600-primary);
  --form-datecell-background-300: var(--colors-primary-sa-flag-300);
  --form-datecell-background-200: var(--colors-primary-sa-flag-200);
  --form-datecell-background-100: var(--colors-primary-sa-flag-100);
  --controls-control-icon-hovered: var(--icon-oncolor);
  --control-disabled: var(--colors-neutral-400);
  --controls-control-icon-pressed: var(--icon-oncolor);
  --controls-control-icon-disabled: var(--colors-base-white);

  /* Component: tables */
  --table-cell-border: var(--colors-neutral-300);
  --table-cell-border-inverse: var(--border-black);
  --table-text-head: var(--colors-neutral-700);
  --table-text-body: var(--text-default);
  --table-background-disabled: var(--background-disabled);
  --table-background-hover-selected: var(--colors-neutral-50);
  --table-background-header: var(--colors-neutral-100);
  --table-background-row: var(--colors-neutral-50);

  /* Component: steppers */
  --stepper-button-completed: var(--colors-primary-sa-flag-600-primary);
  --stepper-button-completed-hovered: var(--colors-primary-sa-flag-700);
  --stepper-button-current: var(--colors-primary-sa-flag-600-primary);
  --stepper-button-current-hovered: var(--colors-primary-sa-flag-700);
  --stepper-button-upcomming: var(--colors-neutral-300);
  --stepper-button-upcomming-hovered: var(--colors-neutral-400);
  --stepper-button-background: var(--colors-base-white);
  --stepper-text-primary: var(--text-display);
  --stepper-text-secondary: var(--text-primary-paragraph);
  --stepper-text-tertiary: var(--text-secondary-paragraph);
  --stepper-line-completed: var(--colors-primary-sa-flag-600-primary);
  --stepper-line-completed-hovered: var(--colors-primary-sa-flag-700);
  --stepper-line-current: var(--colors-neutral-300);
  --stepper-line-upcomming: var(--colors-neutral-300);
  --stepper-line-upcomming-hovered: var(--colors-neutral-400);

  /* Component: tooltips */
  --tooltip-background-light: var(--colors-base-white);
  --tooltip-text-heading-light: var(--text-display);
  --tooltip-text-paragraph-light: var(--text-primary-paragraph);
  --tooltip-background-dark: var(--colors-neutral-800);
  --tooltip-text-heading-dark: var(--colors-neutral-50);
  --tooltip-text-paragraph-dark: var(--colors-neutral-100);

  /* Component: featured icons */
  --featuredicons-icon-oncolor: var(--colors-base-white);
  --featuredicons-icon-success: var(--colors-green-700);
  --featuredicons-icon-default: var(--colors-base-black);
  --featuredicons-icon-error: var(--colors-red-700);
  --featuredicons-icon-secondary: var(--colors-secondary-gold-600-primary);
  --featuredicons-icon-default-500: var(--colors-neutral-500);
  --featuredicons-background-error-light: var(--colors-red-50);
  --featuredicons-background-info-light: var(--colors-blue-50);
  --featuredicons-background-warning-light: var(--colors-yellow-50);
  --featuredicons-background-success-light: var(--colors-green-50);
  --featuredicons-background-brand-light: var(--colors-primary-sa-flag-50);
  --featuredicons-background-default-light: var(--colors-neutral-50);
  --featuredicons-icon-default-400: var(--colors-neutral-400);
  --featuredicons-icon-primary: var(--colors-primary-sa-flag-600-primary);
  --featuredicons-icon-primary-light: var(--colors-primary-sa-flag-50);
  --featuredicons-icon-primary-400: var(--colors-primary-sa-flag-400);
  --featuredicons-icon-neutral: var(--colors-neutral-700);
  --featuredicons-icon-neutral-light: var(--colors-neutral-50);
  --featuredicons-icon-secondary-light: var(--colors-secondary-gold-50);
  --featuredicons-icon-tertiary: var(--colors-tertiary-lavendar-500-primary);
  --featuredicons-icon-tertiary-light: var(--colors-tertiary-lavendar-50);
  --featuredicons-icon-success-light: var(--colors-green-50);
  --featuredicons-icon-info: var(--colors-blue-700);
  --featuredicons-icon-info-light: var(--colors-blue-50);
  --featuredicons-icon-warning: var(--colors-yellow-700);
  --featuredicons-bg-icon-warning-light: var(--background-warning-50);
  --featuredicons-bg-icon-error-light: var(--background-error-50);
  --featuredicons-bg-icon-brand-light: var(--colors-primary-sa-flag-50);
  --featuredicons-bg-icon-info-light: var(--background-info-50);
  --featuredicons-bg-icon-success-light: var(--background-success-50);

  /* Component: notifications */
  --notification-background-error-light: var(--colors-red-50);
  --notification-background-info-light: var(--colors-blue-50);
  --notification-background-warning-light: var(--colors-yellow-50);
  --notification-background-success-light: var(--colors-green-50);
  --notification-background-brand-light: var(--colors-primary-sa-flag-50);
  --notification-background-default-light: var(--colors-neutral-50);
  --notification-background-default-50: var(--background-neutral-50);
  --notification-background-success-50: var(--background-success-50);
  --notification-background-warning-50: var(--background-warning-50);
  --notification-background-error-50: var(--background-error-50);
  --notification-background-brand-50: var(--colors-primary-sa-flag-50);
  --notification-background-info-50: var(--background-info-50);
  --notification-background-default-25: var(--background-neutral-25);
  --notification-background-success-25: var(--background-success-25);
  --notification-background-warning-25: var(--background-warning-25);
  --notification-background-error-25: var(--background-error-25);
  --notification-background-brand-25: var(--background-primary-25);
  --notification-background-info-25: var(--background-info-25);
  --notification-text-success: var(--text-success);
  --notification-text-error: var(--text-error);
  --notification-text-info: var(--text-info);
  --notification-text-warning: var(--text-warning);
  --notification-text-brand: var(--text-primary);

}

/*
 * Dark-mode overrides, captured from `[data-theme=dark] :root` in DGA's
 * build. The theme doesn't use dark mode today -- this is here so it's
 * available if/when that's needed, and costs nothing while unused.
 */
[data-theme="dark"] {
  --background-white: var(--colors-neutral-950);
  --background-body: var(--colors-neutral-900);
  --background-menu: var(--colors-neutral-800);
  --background-card: var(--colors-neutral-800);
  --background-surface-oncolor: var(--colors-base-white);
  --background-black: var(--colors-base-white);
  --background-neutral-800: var(--colors-neutral-600);
  --background-neutral-400: var(--colors-neutral-400);
  --background-neutral-300: var(--colors-neutral-500);
  --background-neutral-200: var(--colors-neutral-600);
  --background-neutral-100: var(--colors-neutral-800);
  --background-neutral-50: var(--colors-neutral-900);
  --background-neutral-25: var(--colors-neutral-950);
  --background-primary: var(--colors-primary-sa-flag-600-primary);
  --background-primary-400: var(--colors-primary-sa-flag-400);
  --background-primary-200: var(--colors-neutral-700);
  --background-primary-50: var(--colors-alpha-alpha-green-10);
  --background-primary-25: var(--colors-primary-sa-flag-950);
  --background-secondary: var(--colors-secondary-gold-600-primary);
  --background-secondary-50: var(--colors-neutral-800);
  --background-secondary-25: var(--colors-neutral-900);
  --background-tertiary: var(--colors-tertiary-lavendar-600);
  --background-tertiary-50: var(--colors-neutral-800);
  --background-tertiary-25: var(--colors-neutral-900);
  --background-success: var(--colors-green-600);
  --background-success-50: var(--colors-neutral-800);
  --background-success-25: var(--colors-neutral-900);
  --background-info: var(--colors-blue-600);
  --background-info-50: var(--colors-neutral-800);
  --background-info-25: var(--colors-neutral-900);
  --background-warning: var(--colors-yellow-600);
  --background-warning-50: var(--colors-neutral-800);
  --background-warning-25: var(--colors-neutral-900);
  --background-error: var(--colors-red-600);
  --background-error-50: var(--colors-neutral-800);
  --background-error-25: var(--colors-neutral-900);
  --background-sa-flag: var(--colors-primary-sa-flag-600-primary);
  --background-sa-flag-50: var(--colors-neutral-800);
  --background-sa-flag-25: var(--colors-neutral-900);
  --background-notification-white: var(--colors-neutral-900);
  --text-default: var(--colors-base-white);
  --text-primary: var(--colors-primary-sa-flag-600-primary);
  --text-secondary: var(--colors-secondary-gold-600-primary);
  --text-tertiary: var(--colors-tertiary-lavendar-500-primary);
  --text-primary-sa-flag: var(--colors-primary-sa-flag-100);
  --text-display: var(--colors-neutral-50);
  --text-primary-paragraph: var(--colors-neutral-100);
  --text-secondary-paragraph: var(--colors-neutral-200);
  --text-oncolor-primary: var(--colors-base-white);
  --text-oncolor-secondary: var(--alpha-white-80);
  --text-oncolor-tertiary: var(--alpha-white-70);
  --text-success: var(--colors-green-600);
  --text-info: var(--colors-blue-600);
  --text-warning: var(--colors-yellow-600);
  --text-error: var(--colors-red-700);
  --text-primary-light: var(--colors-primary-sa-flag-300);
  --text-secondary-light: var(--colors-secondary-gold-300);
  --text-tertiary-light: var(--colors-tertiary-lavendar-300);
  --text-default-disabled: var(--colors-neutral-400);
  --text-default-oncolor-disabled: var(--alpha-black-40);
  --border-white: var(--colors-base-black);
  --border-white-40: var(--alpha-white-40);
  --button-background-black-default: var(--colors-neutral-950);
  --button-background-black-hovered: var(--colors-neutral-800);
  --button-background-black-pressed: var(--colors-neutral-600);
  --button-background-black-selected: var(--colors-neutral-700);
  --button-background-black-focused: var(--colors-neutral-950);
  --button-background-primary-default: var( --colors-primary-sa-flag-600-primary );
  --button-background-primary-hovered: var(--colors-primary-sa-flag-700);
  --button-background-primary-pressed: var(--colors-primary-sa-flag-900);
  --button-background-primary-selected: var(--colors-primary-sa-flag-800);
  --button-background-primary-focused: var( --colors-primary-sa-flag-600-primary );
  --button-background-neutral-default: var(--colors-neutral-800);
  --button-background-neutral-hovered: var(--colors-neutral-700);
  --button-background-neutral-pressed: var(--colors-neutral-600);
  --button-background-neutral-selected: var(--colors-neutral-700);
  --button-background-neutral-focused: var(--colors-neutral-800);
  --button-background-danger-primary-default: var(--colors-red-600);
  --button-background-danger-primary-hovered: var(--colors-red-700);
  --button-background-danger-primary-pressed: var(--colors-red-900);
  --button-background-danger-primary-selected: var(--colors-red-800);
  --button-background-danger-primary-focused: var(--colors-red-600);
  --button-label-danger-primary-default-oncolor: var(--colors-red-200);
  --button-label-danger-primary-hovered-oncolor: var(--colors-red-300);
  --button-label-danger-primary-pressed-oncolor: var(--colors-red-400);
  --button-background-danger-secondary-default: var(--colors-red-50);
  --button-background-danger-secondary-hovered: var(--colors-red-100);
  --button-background-danger-secondary-pressed: var(--colors-red-200);
  --button-background-danger-secondary-selected: var(--colors-red-50);
  --button-background-danger-secondary-focused: var(--colors-red-50);
  --button-background-oncolor-default: var(--colors-base-black);
  --button-background-oncolor-hovered: var(--alpha-white-80);
  --button-background-oncolor-pressed: var(--alpha-white-60);
  --button-background-oncolor-selected: var(--alpha-white-70);
  --button-background-oncolor-focused: var(--alpha-white-100);
  --button-background-transparent-default: var(--alpha-white-0);
  --button-background-transparent-hovered: var(--alpha-white-20);
  --button-background-transparent-pressed: var(--alpha-white-40);
  --button-background-transparent-selected: var(--alpha-white-30);
  --button-background-transparent-focused: var(--alpha-white-0);
  --button-background-disabled-on-color: var(--alpha-white-20);
  --button-label-transparent-hovered-on-color: var( --colors-primary-sa-flag-400 );
  --border-black: var(--colors-base-white);
  --border-primary: var(--colors-primary-sa-flag-600-primary);
  --border-primary-light: var(--colors-green-200);
  --border-secondary: var(--colors-secondary-gold-600-primary);
  --border-secondary-light: var(--colors-secondary-gold-200);
  --border-tertiary: var(--colors-tertiary-lavendar-500-primary);
  --border-tertiary-light: var(--colors-tertiary-lavendar-200);
  --border-neutral-primary: var(--colors-neutral-500);
  --border-neutral-secondary: var(--colors-neutral-700);
  --border-neutral-tertiary: var(--colors-neutral-800);
  --border-background-white: var(--colors-neutral-600);
  --border-background-neutral: var(--colors-neutral-600);
  --border-transparent-10: var(--alpha-white-10);
  --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30);
  --border-success: var(--colors-green-500);
  --button-label-transparent-pressed-on-color: var( --colors-primary-sa-flag-300 );
  --border-success-light: var(--colors-green-200);
  --border-info: var(--colors-blue-700);
  --button-label-transparent-selected-on-color: var( --colors-primary-sa-flag-400 );
  --border-info-light: var(--colors-blue-200);
  --button-icon-transparent-hovered-on-color: var(--colors-primary-sa-flag-400);
  --border-warning: var(--colors-yellow-700);
  --border-warning-light: var(--colors-yellow-200);
  --border-error: var(--colors-red-700);
  --button-icon-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
  --border-error-light: var(--colors-red-200);
  --button-icon-transparent-selected-on-color: var( --colors-primary-sa-flag-400 );
  --border-disabled: var(--colors-neutral-400);
  --link-primary: var(--colors-primary-sa-flag-600-primary);
  --link-primary-hovered: var(--colors-primary-sa-flag-400);
  --link-primary-pressed: var(--colors-primary-sa-flag-300);
  --link-primary-focused: var(--colors-primary-sa-flag-600-primary);
  --link-primary-visited: var(--colors-primary-sa-flag-800);
  --link-icon-primary-hovered: var(--colors-primary-sa-flag-400);
  --link-icon-primary-pressed: var(--colors-primary-sa-flag-300);
  --link-icon-primary-focused: var(--colors-primary-sa-flag-600-primary);
  --link-icon-primary-visited: var(--colors-primary-sa-flag-800);
  --link-secondary: var(--colors-secondary-gold-600-primary);
  --link-secondary-hovered: var(--colors-secondary-gold-400);
  --link-secondary-pressed: var(--colors-secondary-gold-300);
  --link-secondary-focused: var(--colors-secondary-gold-600-primary);
  --link-secondary-visited: var(--colors-secondary-gold-900);
  --link-tertiary: var(--colors-tertiary-lavendar-500-primary);
  --link-tertiary-hovered: var(--colors-tertiary-lavendar-400);
  --link-tertiary-pressed: var(--colors-tertiary-lavendar-300);
  --link-tertiary-focused: var(--colors-tertiary-lavendar-500-primary);
  --link-tertiary-visited: var(--colors-tertiary-lavendar-800);
  --link-neutral: var(--colors-neutral-200);
  --link-neutral-hovered: var(--colors-neutral-400);
  --link-icon-neutral-hovered: var(--colors-neutral-400);
  --link-neutral-pressed: var(--colors-neutral-500);
  --link-icon-neutral-pressed: var(--colors-neutral-500);
  --link-neutral-focused: var(--colors-neutral-200);
  --link-icon-neutral-focused: var(--colors-neutral-200);
  --link-neutral-visited: var(--colors-neutral-300);
  --link-icon-neutral-visited: var(--colors-neutral-300);
  --link-danger: var(--colors-red-600);
  --link-danger-hovered: var(--colors-red-700);
  --link-icon-danger-hovered: var(--colors-red-700);
  --link-danger-pressed: var(--colors-red-900);
  --link-icon-danger-pressed: var(--colors-red-900);
  --link-danger-focused: var(--colors-red-600);
  --link-icon-danger-focused: var(--colors-red-600);
  --link-danger-visited: var(--colors-red-800);
  --link-icon-danger-visited: var(--colors-red-800);
  --link-oncolor: var(--colors-base-white);
  --link-oncolor-hovered: var(--colors-alpha-alpha-white-80);
  --link-icon-oncolor-hovered: var(--alpha-white-80);
  --link-oncolor-pressed: var(--colors-alpha-alpha-white-60);
  --link-icon-oncolor-pressed: var(--alpha-white-60);
  --link-oncolor-focused: var(--colors-base-white);
  --link-link-oncolor-focused: var(--colors-base-white);
  --link-oncolor-visited: var(--colors-alpha-alpha-white-90);
  --link-icon-oncolor-visited: var(--alpha-white-90);
  --link-oncolor-disabled: var(--colors-alpha-alpha-white-30);
  --link-icon-oncolor-disabled: var(--alpha-white-30);
  --icon-oncolor: var(--colors-base-white);
  --tag-background-neutral: var(--colors-primary-sa-flag-600-primary);
  --tag-background-neutral-light: var(--colors-neutral-800);
  --tag-background-on-color: var(--colors-alpha-alpha-white-20);
  --tag-text-neutral: var(--colors-neutral-100);
  --tag-text-success: var(--colors-green-800);
  --tag-text-info: var(--colors-blue-800);
  --tag-text-warning: var(--colors-yellow-800);
  --tag-text-error: var(--colors-red-800);
  --tag-icon-neutral: var(--colors-neutral-100);
  --tag-icon-success: var(--colors-green-800);
  --tag-icon-info: var(--colors-blue-800);
  --tag-icon-warning: var(--colors-yellow-800);
  --tag-icon-error: var(--colors-red-800);
  --tag-background-success: var(--colors-green-700);
  --tag-background-success-light: var(--colors-green-50);
  --tag-background-info: var(--colors-blue-600);
  --tag-background-info-light: var(--colors-blue-50);
  --tag-background-warning: var(--colors-yellow-700);
  --tag-background-warning-light: var(--colors-yellow-50);
  --tag-background-error: var(--colors-red-600);
  --tag-background-error-light: var(--colors-red-50);
  --tag-border-neutral: var(--colors-neutral-300);
  --tag-border-neutral-light: var(--colors-neutral-800);
  --tag-border-on-color: var(--colors-alpha-alpha-white-60);
  --tag-border-success: var(--colors-green-700);
  --tag-border-success-light: var(--colors-green-200);
  --tag-border-info: var(--colors-blue-700);
  --tag-border-info-light: var(--colors-blue-200);
  --tag-border-warning: var(--colors-red-700);
  --tag-border-warning-light: var(--colors-yellow-200);
  --tag-border-error: var(--colors-red-700);
  --tag-border-error-light: var(--colors-red-200);
  --tag-dot: var(--colors-alpha-alpha-white-60);
  --form-text-form-title: var(--text-default);
  --controls-control-primary: var(--alpha-white-0);
  --table-cell-border: var(--colors-neutral-600);
  --table-cell-border-inverse: var(--border-black);
  --table-text-head: var(--colors-neutral-300);
  --table-text-body: var(--text-default);
  --table-background-disabled: var(--background-disabled);
  --table-background-hover-selected: var(--colors-neutral-900);
  --table-background-header: var(--colors-neutral-900);
  --table-background-row: var(--colors-neutral-900);
  --controls-control-primary-checked: var(--colors-primary-sa-flag-600-primary);
  --controls-control-primary-hovered: var(--colors-primary-sa-flag-300);
  --controls-control-primary-pressed: var(--colors-primary-sa-flag-400);
  --controls-control-primary-focused: var(--colors-primary-sa-flag-600-primary);
  --controls-control-neutral-checked: var(--colors-neutral-600);
  --controls-control-neutral-hovered: var(--colors-neutral-400);
  --controls-control-neutral-pressed: var(--colors-neutral-400);
  --controls-control-neutral-focused: var(--colors-neutral-600);
  --controls-control-primary--readonly: var(--alpha-white-0);
  --controls-control-pressed: var(--colors-neutral-600);
  --controls-control-ripple-effect: var(--colors-neutral-950);
  --controls-control-border: var(--colors-neutral-400);
  --form-text-form-paragraph: var(--text-secondary-paragraph);
  --form-field-text-label: var(--text-default);
  --form-field-text-placeholder: var(--text-secondary-paragraph);
  --form-field-text-hovered: var(--text-default);
  --stepper-button-completed: var(--colors-green-600);
  --tooltip-background-light: var(--colors-neutral-800);
  --tooltip-text-heading-light: var(--text-display);
  --tooltip-text-paragraph-light: var(--text-primary-paragraph);
  --tooltip-background-dark: var(--colors-base-white);
  --tooltip-text-heading-dark: var(--colors-neutral-800);
  --tooltip-text-paragraph-dark: var(--colors-neutral-700);
  --alpha-white-0: var(--colors-alpha-alpha-black-10);
  --alpha-white-10: var(--colors-alpha-alpha-black-10);
  --alpha-white-20: var(--colors-alpha-alpha-black-20);
  --alpha-white-30: var(--colors-alpha-alpha-black-30);
  --alpha-white-40: var(--colors-alpha-alpha-black-40);
  --alpha-white-50: var(--colors-alpha-alpha-black-50);
  --alpha-white-60: var(--colors-alpha-alpha-black-60);
  --alpha-white-70: var(--colors-alpha-alpha-black-70);
  --alpha-white-80: var(--colors-alpha-alpha-black-80);
  --alpha-white-90: var(--colors-alpha-alpha-black-90);
  --alpha-white-100: var(--colors-alpha-alpha-black-100);
  --alpha-black-0: var(--colors-alpha-alpha-white-10);
  --alpha-black-10: var(--colors-alpha-alpha-white-10);
  --alpha-black-20: var(--colors-alpha-alpha-white-20);
  --alpha-black-30: var(--colors-alpha-alpha-white-30);
  --alpha-black-40: var(--colors-alpha-alpha-white-40);
  --alpha-black-50: var(--colors-alpha-alpha-white-50);
  --alpha-black-60: var(--colors-alpha-alpha-white-60);
  --alpha-black-70: var(--colors-alpha-alpha-white-70);
  --alpha-black-80: var(--colors-alpha-alpha-white-80);
  --alpha-black-90: var(--colors-alpha-alpha-white-90);
  --alpha-black-100: var(--colors-alpha-alpha-white-100);
  --background-disabled: var(--colors-neutral-700);
  --background-disabled-primary: var(--colors-primary-sa-flag-700);
  --background-inverse-disabled: var(--colors-neutral-700);
  --stepper-button-completed-hovered: var(--colors-primary-sa-flag-700);
  --stepper-button-current: var(--colors-green-600);
  --stepper-button-current-hovered: var(--colors-primary-sa-flag-700);
  --stepper-button-upcomming: var(--colors-neutral-600);
  --stepper-button-upcomming-hovered: var(--colors-neutral-600);
  --stepper-button-background: var(--colors-base-white);
  --stepper-text-primary: var(--text-default);
  --stepper-text-secondary: var(--text-primary-paragraph);
  --stepper-text-tertiary: var(--text-secondary-paragraph);
  --stepper-line-completed: var(--colors-primary-sa-flag-600-primary);
  --stepper-line-completed-hovered: var(--colors-primary-sa-flag-700);
  --stepper-line-current: var(--colors-neutral-700);
  --stepper-line-upcomming: var(--colors-neutral-700);
  --stepper-line-upcomming-hovered: var(--colors-neutral-700);
  --form-field-text-focused: var(--text-primary-paragraph);
  --form-field-text-pressed: var(--text-primary-paragraph);
  --form-field-text-filled: var(--text-default);
  --form-field-text-readonly: var(--text-default);
  --form-field-text-helper: var(--text-secondary-paragraph);
  --form-field-background-default: var(--colors-neutral-800);
  --form-field-background-lighter: var(--colors-neutral-600);
  --form-field-background-darker: var(--colors-neutral-800);
  --form-field-background-pressed: #4d5761;
  --form-field-border-default: var(--colors-neutral-500);
  --form-field-border-hovered: var(--colors-neutral-200);
  --form-field-border-pressed: var(--colors-neutral-25);
  --form-field-border-error: var(--border-error);
  --form-option-background-hover: var(--colors-neutral-500);
  --form-option-background-pressed: var(--colors-neutral-700);
  --form-datecell-background-default: var(--colors-primary-sa-flag-600-primary);
  --form-datecell-background-hovered: var(--colors-primary-sa-flag-700);
  --icon-default: var(--colors-base-white);
  --form-datecell-background-pressed: var(--colors-primary-sa-flag-900);
  --form-datecell-background-focused: var(--colors-primary-sa-flag-600-primary);
  --form-datecell-today-background-default: var(--alpha-white-0);
  --form-datecell-today-background-hovered: var(--colors-neutral-700);
  --form-datecell-today-background-pressed: var(--colors-neutral-600);
  --icon-default-500: var(--colors-neutral-200);
  --form-datecell-today-background-focused: var(--alpha-white-0);
  --form-datecell-background-disabled: #ffffff;
  --form-datecell-background-600: var(--colors-primary-sa-flag-600-primary);
  --form-datecell-background-300: var(--colors-primary-sa-flag-300);
  --form-datecell-background-200: var(--colors-primary-sa-flag-400);
  --form-datecell-background-100: var(--colors-primary-sa-flag-300);
  --controls-control-icon-hovered: var(--colors-primary-sa-flag-800);
  --alpha-primary-10: #166a4519;
  --icon-default-400: var(--colors-neutral-500);
  --icon-primary: var(--colors-primary-sa-flag-600-primary);
  --alpha-primary-20: #166a4533;
  --icon-primary-light: var(--colors-primary-sa-flag-50);
  --alpha-warning-10: #fec84b19;
  --icon-primary-400: var(--colors-primary-sa-flag-400);
  --alpha-warning-20: #fec84b33;
  --alpha-error-10: #b4231819;
  --alpha-error-20: #b4231833;
  --alpha-info-10: #156fee19;
  --alpha-info-20: #156fee33;
  --alpha-success-10: #06945419;
  --alpha-success-20: #06945433;
  --icon-neutral: var(--colors-neutral-500);
  --icon-neutral-light: var(--colors-neutral-950);
  --icon-secondary: var(--colors-secondary-gold-600-primary);
  --icon-secondary-light: var(--colors-secondary-gold-50);
  --icon-tertiary: var(--colors-tertiary-lavendar-600);
  --icon-tertiary-light: var(--colors-tertiary-lavendar-50);
  --icon-success: var(--colors-green-600);
  --icon-success-light: var(--colors-green-50);
  --icon-info: var(--colors-blue-700);
  --icon-info-light: var(--colors-blue-50);
  --icon-warning: var(--colors-yellow-700);
  --icon-warning-light: var(--colors-yellow-50);
  --icon-error: var(--colors-red-700);
  --icon-error-light: var(--colors-red-50);
  --icon-default-disabled: var(--colors-base-white);
  --icon-default-oncolor-disabled: var(--colors-base-white);
  --control-disabled: var(--colors-alpha-alpha-white-30);
  --featuredicons-icon-oncolor: var(--colors-base-white);
  --featuredicons-icon-success: var(--colors-green-600);
  --featuredicons-icon-default: var(--colors-base-white);
  --featuredicons-icon-error: var(--colors-red-700);
  --featuredicons-icon-secondary: var(--colors-secondary-gold-600-primary);
  --featuredicons-icon-default-500: var(--colors-neutral-200);
  --featuredicons-background-error-light: var(--colors-red-50);
  --featuredicons-background-info-light: var(--colors-blue-50);
  --featuredicons-background-warning-light: var(--colors-yellow-50);
  --featuredicons-background-success-light: var(--colors-green-50);
  --featuredicons-background-brand-light: var(--colors-primary-sa-flag-50);
  --featuredicons-background-default-light: var(--colors-neutral-50);
  --featuredicons-icon-default-400: var(--colors-neutral-500);
  --featuredicons-icon-primary: var(--colors-primary-sa-flag-600-primary);
  --featuredicons-icon-primary-light: var(--colors-primary-sa-flag-50);
  --featuredicons-icon-primary-400: var(--colors-primary-sa-flag-400);
  --featuredicons-icon-neutral: var(--colors-neutral-500);
  --featuredicons-icon-neutral-light: var(--colors-neutral-950);
  --featuredicons-icon-secondary-light: var(--colors-secondary-gold-50);
  --featuredicons-icon-tertiary: var(--colors-tertiary-lavendar-600);
  --featuredicons-icon-tertiary-light: var(--colors-tertiary-lavendar-50);
  --featuredicons-icon-success-light: var(--colors-green-50);
  --featuredicons-icon-info: var(--colors-blue-700);
  --featuredicons-icon-info-light: var(--colors-blue-50);
  --featuredicons-icon-warning: var(--colors-yellow-700);
  --featuredicons-bg-icon-warning-light: var(--alpha-warning-10);
  --featuredicons-bg-icon-error-light: var(--alpha-error-10);
  --featuredicons-bg-icon-brand-light: var(--alpha-primary-10);
  --featuredicons-bg-icon-info-light: var(--alpha-info-10);
  --featuredicons-bg-icon-success-light: var(--alpha-success-10);
  --controls-control-icon-pressed: var(--colors-primary-sa-flag-800);
  --controls-control-icon-disabled: var(--colors-neutral-400);
  --notification-background-error-light: var(--colors-red-50);
  --notification-background-info-light: var(--colors-blue-50);
  --notification-background-warning-light: var(--colors-yellow-50);
  --notification-background-success-light: var(--colors-green-50);
  --notification-background-brand-light: var(--colors-primary-sa-flag-50);
  --notification-background-default-light: var(--colors-neutral-50);
  --notification-background-default-50: var(--alpha-white-10);
  --notification-background-success-50: var(--alpha-success-20);
  --notification-background-warning-50: var(--alpha-warning-20);
  --notification-background-error-50: var(--alpha-error-20);
  --notification-background-brand-50: var(--alpha-primary-20);
  --notification-background-info-50: var(--alpha-info-20);
  --notification-background-default-25: var(--alpha-white-0);
  --notification-background-success-25: var(--alpha-primary-10);
  --notification-background-warning-25: var(--alpha-warning-10);
  --notification-background-error-25: var(--alpha-error-10);
  --notification-background-brand-25: var(--alpha-primary-10);
  --notification-background-info-25: var(--alpha-info-10);
  --notification-text-success: var(--colors-green-300);
  --notification-text-error: var(--colors-red-300);
  --notification-text-info: var(--colors-blue-300);
  --notification-text-warning: var(--colors-yellow-300);
  --notification-text-brand: var(--colors-primary-sa-flag-300);
}

/* Real, sitewide, high-severity bug found while checking mobile hero
 * padding (client report: "hero section text looks touching top and
 * bottom" at small widths): the theme's shared page-width wrapper
 * (App\View\Composers\App::defaultContainerClass(), used on every page via
 * $defaultContainerClass -- "container mx-auto px-5 md:px-20
 * 2xl:px-[3.333vw] 3xl:px-[7vw]") has its base mobile side-padding
 * (px-5, 20px) MISSING from this project's static-compiled Tailwind
 * bundle -- confirmed by grepping the compiled CSS: no `.px-5{}` rule
 * exists at all, and `.container{}` itself only has a max-width rule at
 * the 1440px breakpoint, no padding of its own. md:px-20 (768px+) IS
 * compiled and was already confirmed working all session (every desktop
 * screenshot has correct side margins) -- this is specifically a
 * *below-768px* gap, invisible until a page was actually checked at a
 * true mobile viewport width (this session's mobile checks up to now were
 * all >=1024px, within the hamburger-menu range but still wide enough for
 * md:px-20 to apply). Net effect: on any real phone, EVERY page's content
 * -- not just the hero -- runs edge-to-edge with zero side margin. Same
 * "new Tailwind class silently no-ops unless already compiled" gotcha
 * documented in project-tailwind-static-build; fixed here with plain CSS
 * (no rebuild needed) rather than only patching the hero component, since
 * the real bug is sitewide. */
@media (max-width: 767px) {
  /* Partial fix -- see project memory for the full diagnostic trail.
     Left padding is confirmed working; the hero's inner content div (and
     the "Learn more" button specifically) still overflows past the RIGHT
     edge on small screens for a reason not fully isolated without real
     DevTools computed-style inspection (border/background-color changes
     on this same element DID apply correctly, ruling out a caching or
     cascade-delivery problem -- but width/padding behaves asymmetrically
     left vs right, which blind CSS experimentation couldn't explain). */
  .dga-hero__container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: hidden;
  }
  .dga-hero__container * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* partials/page-header.blade.php and page-header-search.blade.php's `lg:pt-*`
   / `lg:pb-*` classes were never compiled into this project's static
   Tailwind bundle (confirmed via grep -- 0 matches for either), so every
   content page's title band silently loses its intended desktop padding
   boost and stays stuck at the mobile-sized values (pt-24/pb-12, or
   pt-32/pb-16 on the search page) even at 1024px and up. Real CSS restores
   the missing values -- the mobile classes still work fine as-is. */
@media (min-width: 1024px) {
  section.pattern-light.bg-primary-25 {
    padding-top: 160px !important;   /* lg:pt-40 */
    padding-bottom: 80px !important; /* lg:pb-20 */
  }
}