:root {
  /* ========== Colors ======== */
  /* ===   Primary Colors   === */
  /* These are the main neutral, brand and semantic colors that make up the majority of the colors used in the design system and components. */

  /* ===== Gray (light mode) ===== */
  /* Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray. */
  /* WCAG Contrast - AAA 7.49 - rgb(71, 84, 103) */
  --app-color-primary-light-gray-25: #fcfcfd;
  /* WCAG Contrast - AAA 7.35 - rgb(71, 84, 103) */
  --app-color-primary-light-gray-50: #f9fafb;
  /* WCAG Contrast - AA 6.97 - rgb(71, 84, 103) */
  --app-color-primary-light-gray-100: #f2f4f7;
  /* WCAG Contrast - AA 6.49 - rgb(71, 84, 103) */
  --app-color-primary-light-gray-200: #eaecf0;
  /* WCAG Contrast - AA 5.21 - rgb(71, 84, 103) */
  --app-color-primary-light-gray-300: #d0d5dd;
  /* WCAG Contrast - 2.58 - white */
  --app-color-primary-light-gray-400: #98a2b3;
  /* WCAG Contrast - AA 4.95 - white */
  --app-color-primary-light-gray-500: #667085;
  /* WCAG Contrast - AAA 7.65 - white */
  --app-color-primary-light-gray-600: #475467;
  /* WCAG Contrast - AAA 10.41 - white */
  --app-color-primary-light-gray-700: #344054;
  /* WCAG Contrast - AAA 16.02 - white */
  --app-color-primary-light-gray-800: #182230;
  /* WCAG Contrast - AAA 17.79 - white */
  --app-color-primary-light-gray-900: #101828;
  /* WCAG Contrast - AAA 18.85 - white */
  --app-color-primary-light-gray-950: #0c111d;

  /* ===== Gray (dark mode) ===== */
  /* This is a separate gray color palette used specifically for dark mode. This gray has been desaturated and optimised to work well within dark mode variables. */
  /* WCAG Contrast - AA 5.67 - rgb(97, 100, 108) */
  --app-color-primary-dark-gray-25: #fafafa;
  /* WCAG Contrast - AA 5.43 - rgb(97, 100, 108) */
  --app-color-primary-dark-gray-50: #f5f5f6;
  /* WCAG Contrast - AA 5.32 - rgb(97, 100, 108) */
  --app-color-primary-dark-gray-100: #f0f1f1;
  /* WCAG Contrast - AA 5.01 - rgb(97, 100, 108) */
  --app-color-primary-dark-gray-200: #ececed;
  /* WCAG Contrast - 3.79 - rgb(97, 100, 108) */
  --app-color-primary-dark-gray-300: #cecfd2;
  /* WCAG Contrast - 2.95 - white */
  --app-color-primary-dark-gray-400: #94969c;
  /* WCAG Contrast - 3.55 - white */
  --app-color-primary-dark-gray-500: #85888e;
  /* WCAG Contrast - AA 5.91 - white */
  --app-color-primary-dark-gray-600: #61646c;
  /* WCAG Contrast - AAA 11.90 - white */
  --app-color-primary-dark-gray-700: #333741;
  /* WCAG Contrast - AAA 15.53 - white */
  --app-color-primary-dark-gray-800: #1f242f;
  /* WCAG Contrast - AAA 17.22 - white */
  --app-color-primary-dark-gray-900: #161b26;
  /* WCAG Contrast - AAA 18.85 - white */
  --app-color-primary-dark-gray-950: #0c111d;

  /* ===== Brand ===== */
  /* The brand color is your "primary" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion. */
  /* WCAG Contrast - AA 6.39 - rgb(105, 65, 198) */
  --app-color-primary-brand-25: #fcfaff;
  /* WCAG Contrast - AA 6.16 - rgb(105, 65, 198) */
  --app-color-primary-brand-50: #f9f5ff;
  /* WCAG Contrast - AA 5.74 - rgb(105, 65, 198) */
  --app-color-primary-brand-100: #f4ebff;
  /* WCAG Contrast - AA 4.93 - rgb(105, 65, 198) */
  --app-color-primary-brand-200: #e9d7fe;
  /* WCAG Contrast - 3.89 - rgb(105, 65, 198) */
  --app-color-primary-brand-300: #d6bbfb;
  /* WCAG Contrast - 2.49 - white */
  --app-color-primary-brand-400: #b692f6;
  /* WCAG Contrast - 3.33 - white */
  --app-color-primary-brand-500: #9e77ed;
  /* WCAG Contrast - AA 4.96 - white */
  --app-color-primary-brand-600: #7f56d9;
  /* WCAG Contrast - AA 6.63 - white */
  --app-color-primary-brand-700: #6941c6;
  /* WCAG Contrast - AAA 8.67 - white */
  --app-color-primary-brand-800: #53389e;
  /* WCAG Contrast - AAA 10.78 - white */
  --app-color-primary-brand-900: #42307d;
  /* WCAG Contrast - AAA 14.66 - white */
  --app-color-primary-brand-950: #2c1c5f;

  /* ===== Error ===== */
  /* Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team. */
  /* WCAG Contrast - AA 6.4 - rgb(180, 35, 24) */
  --app-color-primary-error-25: #fffbfa;
  /* WCAG Contrast - AA 6.06 - rgb(180, 35, 24) */
  --app-color-primary-error-50: #fef3f2;
  /* WCAG Contrast - AA 5.4 - rgb(180, 35, 24) */
  --app-color-primary-error-100: #fee4e2;
  /* WCAG Contrast - AA 4.56 - rgb(180, 35, 24) */
  --app-color-primary-error-200: #fecdca;
  /* WCAG Contrast - 3.38 - rgb(180, 35, 24) */
  --app-color-primary-error-300: #fda29b;
  /* WCAG Contrast - 2.78 - white */
  --app-color-primary-error-400: #f97066;
  /* WCAG Contrast - 3.76 - white */
  --app-color-primary-error-500: #f04438;
  /* WCAG Contrast - AA 4.82 - white */
  --app-color-primary-error-600: #d92d20;
  /* WCAG Contrast - AA 6.60 - white */
  --app-color-primary-error-700: #b42318;
  /* WCAG Contrast - AAA 8.70 - white */
  --app-color-primary-error-800: #912018;
  /* WCAG Contrast - AAA 9.86 - white */
  --app-color-primary-error-900: #7a271a;
  /* WCAG Contrast - AAA 13.97 - white */
  --app-color-primary-error-950: #55160c;

  /* ===== Warning ===== */
  /* Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention. */
  /* WCAG Contrast - AA 5.28 - rgb(181, 71, 8) */
  --app-color-primary-warning-25: #fffcf5;
  /* WCAG Contrast - AA 5.17 - rgb(181, 71, 8) */
  --app-color-primary-warning-50: #fffaeb;
  /* WCAG Contrast - AA 4.75 - rgb(181, 71, 8) */
  --app-color-primary-warning-100: #fef0c7;
  /* WCAG Contrast - 4.15 - rgb(181, 71, 8) */
  --app-color-primary-warning-200: #fedf89;
  /* WCAG Contrast - 3.50 - rgb(181, 71, 8) */
  --app-color-primary-warning-300: #fec84b;
  /* WCAG Contrast - 1.84 - white */
  --app-color-primary-warning-400: #fdb022;
  /* WCAG Contrast - 2.34 - white */
  --app-color-primary-warning-500: #f79009;
  /* WCAG Contrast - 3.49 - white */
  --app-color-primary-warning-600: #dc6803;
  /* WCAG Contrast - AA 5.40 - white */
  --app-color-primary-warning-700: #b54708;
  /* WCAG Contrast - AAA 7.49 - white */
  --app-color-primary-warning-800: #93370d;
  /* WCAG Contrast - AAA 9.48 - white */
  --app-color-primary-warning-900: #7a2e0e;
  /* WCAG Contrast - AAA 13.92 - white */
  --app-color-primary-warning-950: #4e1d09;

  /* ===== Success ===== */
  /* Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green. */
  /* WCAG Contrast - AA 5.51 - rgb(6, 118, 71) */
  --app-color-primary-success-25: #f6fef9;
  /* WCAG Contrast - AA 5.36 - rgb(6, 118, 71) */
  --app-color-primary-success-50: #ecfdf3;
  /* WCAG Contrast - AA 5.07 - rgb(6, 118, 71) */
  --app-color-primary-success-100: #dcfae6;
  /* WCAG Contrast - 4.27 - rgb(6, 118, 71) */
  --app-color-primary-success-200: #abefc6;
  /* WCAG Contrast - 3.51 - rgb(6, 118, 71) */
  --app-color-primary-success-300: #75e0a7;
  /* WCAG Contrast - 2.03 - white */
  --app-color-primary-success-400: #47cd89;
  /* WCAG Contrast - 2.76 - white */
  --app-color-primary-success-500: #17b26a;
  /* WCAG Contrast - 3.91 - white */
  --app-color-primary-success-600: #079455;
  /* WCAG Contrast - AA 5.66 - white */
  --app-color-primary-success-700: #067647;
  /* WCAG Contrast - AAA 7.92 - white */
  --app-color-primary-success-800: #085d3a;
  /* WCAG Contrast - AAA 9.95 - white */
  --app-color-primary-success-900: #074d31;
  /* WCAG Contrast - AAA 13.93 - white */
  --app-color-primary-success-950: #053321;

  /* ===   Secondary Colors   === */
  /* Along with primary colors, it's helpful to have a selection of secondary colors to use in components such as pills, alerts and labels. These secondary colors should be used sparingly or as accents, while the primary color(s) should take precedence. */

  /* ===== Gray blue ===== */
  /* Can be swapped with the default gray color. */
  /* WCAG Contrast - AAA 8.39 - rgb(62, 71, 132) */
  --app-color-secondary-gray-blue-25: #fcfcfd;
  /* WCAG Contrast - AAA 8.17 - rgb(62, 71, 132) */
  --app-color-secondary-gray-blue-50: #f8f9fc;
  /* WCAG Contrast - AAA 7.30 - rgb(62, 71, 132) */
  --app-color-secondary-gray-blue-100: #eaecf5;
  /* WCAG Contrast - AA 6.13 - rgb(62, 71, 132) */
  --app-color-secondary-gray-blue-200: #d5d9eb;
  /* WCAG Contrast - 4.42 - rgb(62, 71, 132) */
  --app-color-secondary-gray-blue-300: #b3b8db;
  /* WCAG Contrast - 4.01 - white */
  --app-color-secondary-gray-blue-400: #717bbc;
  /* WCAG Contrast - AA 6.24 - white */
  --app-color-secondary-gray-blue-500: #4e5ba6;
  /* WCAG Contrast - AAA 8.59 - white */
  --app-color-secondary-gray-blue-600: #3e4784;
  /* WCAG Contrast - AAA 9.99 - white */
  --app-color-secondary-gray-blue-700: #363f72;
  /* WCAG Contrast - AAA 12.72 - white */
  --app-color-secondary-gray-blue-800: #293056;
  /* WCAG Contrast - AAA 18.43 - white */
  --app-color-secondary-gray-blue-900: #101323;
  /* WCAG Contrast - AAA 19.04 - white */
  --app-color-secondary-gray-blue-950: #0d0f1c;

  /* ===== Gray cool (New) ===== */
  /* Can be swapped with the default gray color. */
  /* WCAG Contrast - AAA 7.15 - rgb(74, 85, 120) */
  --app-color-secondary-gray-cool-25: #fcfcfd;
  /* WCAG Contrast - AA 6.97 - rgb(74, 85, 120) */
  --app-color-secondary-gray-cool-50: #f9f9fb;
  /* WCAG Contrast - AA 6.48 - rgb(74, 85, 120) */
  --app-color-secondary-gray-cool-100: #eff1f5;
  /* WCAG Contrast - AA 5.51 - rgb(74, 85, 120) */
  --app-color-secondary-gray-cool-200: #dcdfea;
  /* WCAG Contrast - 4.03 - rgb(74, 85, 120) */
  --app-color-secondary-gray-cool-300: #b9c0d4;
  /* WCAG Contrast - 3.45 - white */
  --app-color-secondary-gray-cool-400: #7d89b0;
  /* WCAG Contrast - AA 5.24 - white */
  --app-color-secondary-gray-cool-500: #5d6b98;
  /* WCAG Contrast - AAA 7.37 - white */
  --app-color-secondary-gray-cool-600: #4a5578;
  /* WCAG Contrast - AAA 8.82 - white */
  --app-color-secondary-gray-cool-700: #404968;
  /* WCAG Contrast - AAA 11.71 - white */
  --app-color-secondary-gray-cool-800: #30374f;
  /* WCAG Contrast - AAA 18.36 - white */
  --app-color-secondary-gray-cool-900: #111322;
  /* WCAG Contrast - AAA 18.99 - white */
  --app-color-secondary-gray-cool-950: #0e101b;

  /* ===== Gray modern (New) ===== */
  /* Can be swapped with the default gray color. */
  /* WCAG Contrast - AAA 7.35 - rgb(75, 85, 101) */
  --app-color-secondary-gray-modern-25: #fcfcfd;
  /* WCAG Contrast - AAA 7.20 - rgb(75, 85, 101) */
  --app-color-secondary-gray-modern-50: #f8fafc;
  /* WCAG Contrast - AA 6.69 - rgb(75, 85, 101) */
  --app-color-secondary-gray-modern-100: #eef2f6;
  /* WCAG Contrast - AA 6.12 - rgb(75, 85, 101) */
  --app-color-secondary-gray-modern-200: #e3e8ef;
  /* WCAG Contrast - AA 5.08 - rgb(75, 85, 101) */
  --app-color-secondary-gray-modern-300: #cdd5df;
  /* WCAG Contrast - 2.53 - white */
  --app-color-secondary-gray-modern-400: #9aa4b2;
  /* WCAG Contrast - AA 4.69 - white */
  --app-color-secondary-gray-modern-500: #697586;
  /* WCAG Contrast - AAA 7.51 - white */
  --app-color-secondary-gray-modern-600: #4b5565;
  /* WCAG Contrast - AAA 10.31 - white */
  --app-color-secondary-gray-modern-700: #364152;
  /* WCAG Contrast - AAA 14.60 - white */
  --app-color-secondary-gray-modern-800: #202939;
  /* WCAG Contrast - AAA 17.67 - white */
  --app-color-secondary-gray-modern-900: #121926;
  /* WCAG Contrast - AAA 18.76 - white */
  --app-color-secondary-gray-modern-950: #0d121c;

  /* ===== Gray neutral (New) ===== */
  /* Can be swapped with the default gray color. */
  /* WCAG Contrast - AAA 7.18 - rgb(77, 87, 97) */
  --app-color-secondary-gray-neutral-25: #fcfcfd;
  /* WCAG Contrast - AAA 7.04 - rgb(77, 87, 97) */
  --app-color-secondary-gray-neutral-50: #f9fafb;
  /* WCAG Contrast - AA 6.69 - rgb(77, 87, 97) */
  --app-color-secondary-gray-neutral-100: #f3f4f6;
  /* WCAG Contrast - AA 5.94 - rgb(77, 87, 97) */
  --app-color-secondary-gray-neutral-200: #e5e7eb;
  /* WCAG Contrast - AA 5.04 - rgb(77, 87, 97) */
  --app-color-secondary-gray-neutral-300: #d2d6db;
  /* WCAG Contrast - AA 2.52 - white */
  --app-color-secondary-gray-neutral-400: #9da4ae;
  /* WCAG Contrast - AA 4.78 - white */
  --app-color-secondary-gray-neutral-500: #6c737f;
  /* WCAG Contrast - AAA 7.40 - white */
  --app-color-secondary-gray-neutral-600: #4d5761;
  /* WCAG Contrast - AAA 10.19 - white */
  --app-color-secondary-gray-neutral-700: #384250;
  /* WCAG Contrast - AAA 14.55 - white */
  --app-color-secondary-gray-neutral-800: #1f2a37;
  /* WCAG Contrast - AAA 17.64 - white */
  --app-color-secondary-gray-neutral-900: #111927;
  /* WCAG Contrast - AAA 18.74 - white */
  --app-color-secondary-gray-neutral-950: #0d121c;

  /* ===== Gray iron (New) ===== */
  /* Can be swapped with the default gray color. */
  /* WCAG Contrast - AAA 7.54 - rgb(81, 82, 92) */
  --app-color-secondary-gray-iron-25: #fcfcfc;
  /* WCAG Contrast - AAA 7.42 - rgb(81, 82, 92) */
  --app-color-secondary-gray-iron-50: #fafafa;
  /* WCAG Contrast - AAA 7.04 - rgb(81, 82, 92) */
  --app-color-secondary-gray-iron-100: #f4f4f5;
  /* WCAG Contrast - AA 6.10 - rgb(81, 82, 92) */
  --app-color-secondary-gray-iron-200: #e4e4e7;
  /* WCAG Contrast - AA 5.09 - rgb(81, 82, 92) */
  --app-color-secondary-gray-iron-300: #d1d1d6;
  /* WCAG Contrast - 2.58 - white */
  --app-color-secondary-gray-iron-400: #a0a0ab;
  /* WCAG Contrast - AA 4.89 - white */
  --app-color-secondary-gray-iron-500: #70707b;
  /* WCAG Contrast - AAA 7.77 - white */
  --app-color-secondary-gray-iron-600: #51525c;
  /* WCAG Contrast - AAA 10.48 - white */
  --app-color-secondary-gray-iron-700: #3f3f46;
  /* WCAG Contrast - AAA 14.96 - white */
  --app-color-secondary-gray-iron-800: #26272b;
  /* WCAG Contrast - AAA 17.74 - white */
  --app-color-secondary-gray-iron-900: #1a1a1e;
  /* WCAG Contrast - AAA 18.54 - white */
  --app-color-secondary-gray-iron-950: #131316;

  /* ===== Gray true (New) ===== */
  /* Can be swapped with the default gray color. */
  /* WCAG Contrast - AAA 7.61 - rgb(82, 82, 82) */
  --app-color-secondary-gray-true-25: #fcfcfc;
  /* WCAG Contrast - AAA 7.48 - rgb(82, 82, 82) */
  --app-color-secondary-gray-true-50: #fafafa;
  /* WCAG Contrast - AAA 7.16 - rgb(82, 82, 82) */
  --app-color-secondary-gray-true-100: #f5f5f5;
  /* WCAG Contrast - AA 6.20 - rgb(82, 82, 82) */
  --app-color-secondary-gray-true-200: #e5e5e5;
  /* WCAG Contrast - AA 5.37 - rgb(82, 82, 82) */
  --app-color-secondary-gray-true-300: #d6d6d6;
  /* WCAG Contrast - 2.52 - white */
  --app-color-secondary-gray-true-400: #a3a3a3;
  /* WCAG Contrast - AA 4.74 - white */
  --app-color-secondary-gray-true-500: #737373;
  /* WCAG Contrast - AAA 7.81 - white */
  --app-color-secondary-gray-true-600: #525252;
  /* WCAG Contrast - AAA 10.00 - white */
  --app-color-secondary-gray-true-700: #424242;
  /* WCAG Contrast - AAA 14.59 - white */
  --app-color-secondary-gray-true-800: #292929;
  /* WCAG Contrast - AAA 18.36 - white */
  --app-color-secondary-gray-true-900: #141414;
  /* WCAG Contrast - AAA 19.13 - white */
  --app-color-secondary-gray-true-950: #0f0f0f;

  /* ===== Gray warm (New) ===== */
  /* Can be swapped with the default gray color. */
  /* WCAG Contrast - AAA 7.49 - rgb(87, 83, 78) */
  --app-color-secondary-gray-warm-25: #fdfdfc;
  /* WCAG Contrast - AAA 7.30 - rgb(87, 83, 78) */
  --app-color-secondary-gray-warm-50: #fafaf9;
  /* WCAG Contrast - AA 6.99 - rgb(87, 83, 78) */
  --app-color-secondary-gray-warm-100: #f5f5f4;
  /* WCAG Contrast - AA 6.07 - rgb(87, 83, 78) */
  --app-color-secondary-gray-warm-200: #e7e5e4;
  /* WCAG Contrast - AA 5.12 - rgb(87, 83, 78) */
  --app-color-secondary-gray-warm-300: #d7d3d0;
  /* WCAG Contrast - 2.53 - white */
  --app-color-secondary-gray-warm-400: #a9a29d;
  /* WCAG Contrast - AA 4.81 - white */
  --app-color-secondary-gray-warm-500: #79716b;
  /* WCAG Contrast - AAA 7.64 - white */
  --app-color-secondary-gray-warm-600: #57534e;
  /* WCAG Contrast - AAA 10.28 - white */
  --app-color-secondary-gray-warm-700: #44403c;
  /* WCAG Contrast - AAA 15.19 - white */
  --app-color-secondary-gray-warm-800: #292524;
  /* WCAG Contrast - AAA 17.50 - white */
  --app-color-secondary-gray-warm-900: #1c1917;
  /* WCAG Contrast - AAA 18.36 - white */
  --app-color-secondary-gray-warm-950: #171412;

  /* ===== Moss (New) ===== */
  /* Can be swapped with the default success color. */
  /* WCAG Contrast - AA 6.87 - rgb(63, 98, 26) */
  --app-color-secondary-moss-25: #fafdf7;
  /* WCAG Contrast - AA 6.68 - rgb(63, 98, 26) */
  --app-color-secondary-moss-50: #f5fbee;
  /* WCAG Contrast - AA 6.16 - rgb(63, 98, 26) */
  --app-color-secondary-moss-100: #e6f4d7;
  /* WCAG Contrast - AA 5.39 - rgb(63, 98, 26) */
  --app-color-secondary-moss-200: #ceeab0;
  /* WCAG Contrast - AA 4.46 - rgb(63, 98, 26) */
  --app-color-secondary-moss-300: #acdc79;
  /* WCAG Contrast - 1.98 - white */
  --app-color-secondary-moss-400: #86cb3c;
  /* WCAG Contrast - 3.21 - white */
  --app-color-secondary-moss-500: #669f2a;
  /* WCAG Contrast - AA 5.05 - white */
  --app-color-secondary-moss-600: #4f7a21;
  /* WCAG Contrast - AAA 7.06 - white */
  --app-color-secondary-moss-700: #3f621a;
  /* WCAG Contrast - AAA 9.15 - white */
  --app-color-secondary-moss-800: #335015;
  /* WCAG Contrast - AAA 11.06 - white */
  --app-color-secondary-moss-900: #2b4212;
  /* WCAG Contrast - AAA 15.49 - white */
  --app-color-secondary-moss-950: #1a280b;

  /* ===== Green light (New) ===== */
  /* Can be swapped with the default success color. */
  /* WCAG Contrast - AA 5.07 - rgb(59, 124, 15) */
  --app-color-secondary-green-light-25: #fafef5;
  /* WCAG Contrast - AA 4.94 - rgb(59, 124, 15) */
  --app-color-secondary-green-light-50: #f3fee7;
  /* WCAG Contrast - AA 4.66 - rgb(59, 124, 15) */
  --app-color-secondary-green-light-100: #e4fbcc;
  /* WCAG Contrast - 4.33 - rgb(59, 124, 15) */
  --app-color-secondary-green-light-200: #d0f8ab;
  /* WCAG Contrast - 3.72 - rgb(59, 124, 15) */
  --app-color-secondary-green-light-300: #a6ef67;
  /* WCAG Contrast - 1.63 - white */
  --app-color-secondary-green-light-400: #85e13a;
  /* WCAG Contrast - 2.18 - white */
  --app-color-secondary-green-light-500: #66c61c;
  /* WCAG Contrast - 3.21 - white */
  --app-color-secondary-green-light-600: #4ca30d;
  /* WCAG Contrast - AA 5.16 - white */
  --app-color-secondary-green-light-700: #3b7c0f;
  /* WCAG Contrast - AAA 7.26 - white */
  --app-color-secondary-green-light-800: #326212;
  /* WCAG Contrast - AAA 8.93 - white */
  --app-color-secondary-green-light-900: #2b5314;
  /* WCAG Contrast - AAA 15.49 - white */
  --app-color-secondary-green-light-950: #15290a;

  /* ===== Green (New) ===== */
  /* Can be swapped with the default success color. */
  /* WCAG Contrast - AA 5.69 - rgb(8, 116, 67) */
  --app-color-secondary-green-25: #f6fef9;
  /* WCAG Contrast - AA 5.53 - rgb(8, 116, 67) */
  --app-color-secondary-green-50: #edfcf2;
  /* WCAG Contrast - AA 5.10 - rgb(8, 116, 67) */
  --app-color-secondary-green-100: #d3f8df;
  /* WCAG Contrast - 4.45 - rgb(8, 116, 67) */
  --app-color-secondary-green-200: #aaf0c4;
  /* WCAG Contrast - 3.65 - rgb(8, 116, 67) */
  --app-color-secondary-green-300: #73e2a3;
  /* WCAG Contrast - 2.09 - white */
  --app-color-secondary-green-400: #3ccb7f;
  /* WCAG Contrast - 2.74 - white */
  --app-color-secondary-green-500: #16b364;
  /* WCAG Contrast - 4.02 - white */
  --app-color-secondary-green-600: #099250;
  /* WCAG Contrast - AA 5.85 - white */
  --app-color-secondary-green-700: #087443;
  /* WCAG Contrast - AAA 8.10 - white */
  --app-color-secondary-green-800: #095c37;
  /* WCAG Contrast - AAA 10.13 - white */
  --app-color-secondary-green-900: #084c2e;
  /* WCAG Contrast - AAA 14.86 - white */
  --app-color-secondary-green-950: #052e1c;

  /* ===== Teal (New) ===== */
  /* Can be swapped with the default success color. */
  /* WCAG Contrast - AA 5.42 - rgb(16, 117, 105) */
  --app-color-secondary-teal-25: #f6fefc;
  /* WCAG Contrast - AA 5.33 - rgb(16, 117, 105) */
  --app-color-secondary-teal-50: #f0fdf9;
  /* WCAG Contrast - AA 4.92 - rgb(16, 117, 105) */
  --app-color-secondary-teal-100: #ccfbef;
  /* WCAG Contrast - 4.39 - rgb(16, 117, 105) */
  --app-color-secondary-teal-200: #99f6e0;
  /* WCAG Contrast - 3.72 - rgb(16, 117, 105) */
  --app-color-secondary-teal-300: #5fe9d0;
  /* WCAG Contrast - 1.89 - white */
  --app-color-secondary-teal-400: #2ed3b7;
  /* WCAG Contrast - 2.54 - white */
  --app-color-secondary-teal-500: #15b79e;
  /* WCAG Contrast - 3.79 - white */
  --app-color-secondary-teal-600: #0e9384;
  /* WCAG Contrast - AA 5.57 - white */
  --app-color-secondary-teal-700: #107569;
  /* WCAG Contrast - AAA 7.68 - white */
  --app-color-secondary-teal-800: #125d56;
  /* WCAG Contrast - AAA 9.55 - white */
  --app-color-secondary-teal-900: #134e48;
  /* WCAG Contrast - AAA 15.50 - white */
  --app-color-secondary-teal-950: #0a2926;

  /* ===== Cyan (New) ===== */
  /* WCAG Contrast - AA 5.52 - rgb(14, 112, 144) */
  --app-color-secondary-cyan-25: #f5feff;
  /* WCAG Contrast - AA 5.41 - rgb(14, 112, 144) */
  --app-color-secondary-cyan-50: #ecfdff;
  /* WCAG Contrast - AA 5.00 - rgb(14, 112, 144) */
  --app-color-secondary-cyan-100: #cff9fe;
  /* WCAG Contrast - 4.44 - rgb(14, 112, 144) */
  --app-color-secondary-cyan-200: #a5f0fc;
  /* WCAG Contrast - 3.72 - rgb(14, 112, 144) */
  --app-color-secondary-cyan-300: #67e3f9;
  /* WCAG Contrast - 1.92 - white */
  --app-color-secondary-cyan-400: #22ccee;
  /* WCAG Contrast - 2.61 - white */
  --app-color-secondary-cyan-500: #06aed4;
  /* WCAG Contrast - 3.96 - white */
  --app-color-secondary-cyan-600: #088ab2;
  /* WCAG Contrast - AA 5.65 - white */
  --app-color-secondary-cyan-700: #0e7090;
  /* WCAG Contrast - AAA 7.50 - white */
  --app-color-secondary-cyan-800: #155b75;
  /* WCAG Contrast - AAA 9.35 - white */
  --app-color-secondary-cyan-900: #164c63;
  /* WCAG Contrast - AAA 14.47 - white */
  --app-color-secondary-cyan-950: #0d2d3a;

  /* ===== Blue light ===== */
  /* WCAG Contrast - AA 5.60 - rgb(2, 106, 162) */
  --app-color-secondary-blue-light-25: #f5fbff;
  /* WCAG Contrast - AA 5.48 - rgb(2, 106, 162) */
  --app-color-secondary-blue-light-50: #f0f9ff;
  /* WCAG Contrast - AA 5.09 - rgb(2, 106, 162) */
  --app-color-secondary-blue-light-100: #e0f2fe;
  /* WCAG Contrast - 4.39 - rgb(2, 106, 162) */
  --app-color-secondary-blue-light-200: #b9e6fe;
  /* WCAG Contrast - 3.53 - rgb(2, 106, 162) */
  --app-color-secondary-blue-light-300: #7cd4fd;
  /* WCAG Contrast - 2.10 - white */
  --app-color-secondary-blue-light-400: #36bffa;
  /* WCAG Contrast - 2.77 - white */
  --app-color-secondary-blue-light-500: #0ba5ec;
  /* WCAG Contrast - 4.00 - white */
  --app-color-secondary-blue-light-600: #0086c9;
  /* WCAG Contrast - AA 5.85 - white */
  --app-color-secondary-blue-light-700: #026aa2;
  /* WCAG Contrast - AAA 7.52 - white */
  --app-color-secondary-blue-light-800: #065986;
  /* WCAG Contrast - AAA 9.41 - white */
  --app-color-secondary-blue-light-900: #0b4a6f;
  /* WCAG Contrast - AAA 14.61 - white */
  --app-color-secondary-blue-light-950: #062c41;

  /* ===== Blue ===== */
  /* WCAG Contrast - AA 5.68 - rgb(23, 92, 211) */
  --app-color-secondary-blue-25: #f5faff;
  /* WCAG Contrast - AA 5.55 - rgb(23, 92, 211) */
  --app-color-secondary-blue-50: #eff8ff;
  /* WCAG Contrast - AA 4.78 - rgb(23, 92, 211) */
  --app-color-secondary-blue-100: #d1e9ff;
  /* WCAG Contrast - 4.17 - rgb(23, 92, 211) */
  --app-color-secondary-blue-200: #b2ddff;
  /* WCAG Contrast - 3.38 - rgb(23, 92, 211) */
  --app-color-secondary-blue-300: #84caff;
  /* WCAG Contrast - 2.32 - white */
  --app-color-secondary-blue-400: #53b1fd;
  /* WCAG Contrast - 3.24 - white */
  --app-color-secondary-blue-500: #2e90fa;
  /* WCAG Contrast - AA 4.57 - white */
  --app-color-secondary-blue-600: #1570ef;
  /* WCAG Contrast - AA 5.97 - white */
  --app-color-secondary-blue-700: #175cd3;
  /* WCAG Contrast - AAA 8.19 - white */
  --app-color-secondary-blue-800: #1849a9;
  /* WCAG Contrast - AAA 9.86 - white */
  --app-color-secondary-blue-900: #194185;
  /* WCAG Contrast - AAA 14.15 - white */
  --app-color-secondary-blue-950: #102a56;

  /* ===== Blue dark (New) ===== */
  /* WCAG Contrast - AA 6.01 - rgb(0, 78, 235) */
  --app-color-secondary-blue-dark-25: #f5f8ff;
  /* WCAG Contrast - AA 5.80 - rgb(0, 78, 235) */
  --app-color-secondary-blue-dark-50: #eff4ff;
  /* WCAG Contrast - AA 4.82 - rgb(0, 78, 235) */
  --app-color-secondary-blue-dark-100: #d1e0ff;
  /* WCAG Contrast - 3.93 - rgb(0, 78, 235) */
  --app-color-secondary-blue-dark-200: #b2ccff;
  /* WCAG Contrast - 2.85 - rgb(0, 78, 235) */
  --app-color-secondary-blue-dark-300: #84adff;
  /* WCAG Contrast - 3.22 - white */
  --app-color-secondary-blue-dark-400: #528bff;
  /* WCAG Contrast - 4.31 - white */
  --app-color-secondary-blue-dark-500: #2970ff;
  /* WCAG Contrast - AA 5.43 - white */
  --app-color-secondary-blue-dark-600: #155eef;
  /* WCAG Contrast - AA 6.38 - white */
  --app-color-secondary-blue-dark-700: #004eeb;
  /* WCAG Contrast - AAA 8.36 - white */
  --app-color-secondary-blue-dark-800: #0040c1;
  /* WCAG Contrast - AAA 10.51 - white */
  --app-color-secondary-blue-dark-900: #00359e;
  /* WCAG Contrast - AAA 14.78 - white */
  --app-color-secondary-blue-dark-950: #002266;

  /* ===== Indigo ===== */
  /* WCAG Contrast - AAA 7.60 - rgb(53, 56, 205) */
  --app-color-secondary-indigo-25: #f5f8ff;
  /* WCAG Contrast - AAA 7.31 - rgb(53, 56, 205) */
  --app-color-secondary-indigo-50: #eef4ff;
  /* WCAG Contrast - AA 6.71 - rgb(53, 56, 205) */
  --app-color-secondary-indigo-100: #e0eaff;
  /* WCAG Contrast - AA 5.63 - rgb(53, 56, 205) */
  --app-color-secondary-indigo-200: #c7d7fe;
  /* WCAG Contrast - 4.30 - rgb(53, 56, 205) */
  --app-color-secondary-indigo-300: #a4bcfd;
  /* WCAG Contrast - 2.70 - white */
  --app-color-secondary-indigo-400: #8098f9;
  /* WCAG Contrast - 4.03 - white */
  --app-color-secondary-indigo-500: #6172f3;
  /* WCAG Contrast - AA 6.10 - white */
  --app-color-secondary-indigo-600: #444ce7;
  /* WCAG Contrast - AAA 8.09 - white */
  --app-color-secondary-indigo-700: #3538cd;
  /* WCAG Contrast - AAA 9.97 - white */
  --app-color-secondary-indigo-800: #2d31a6;
  /* WCAG Contrast - AAA 11.07 - white */
  --app-color-secondary-indigo-900: #2d3282;
  /* WCAG Contrast - AAA 14.45 - white */
  --app-color-secondary-indigo-950: #1f235b;

  /* ===== Violet (New) ===== */
  /* WCAG Contrast - AA 6.97 - rgb(105, 39, 218) */
  --app-color-secondary-violet-25: #fbfaff;
  /* WCAG Contrast - AA 6.61 - rgb(105, 39, 218) */
  --app-color-secondary-violet-50: #f5f3ff;
  /* WCAG Contrast - AA 6.10 - rgb(105, 39, 218) */
  --app-color-secondary-violet-100: #ece9fe;
  /* WCAG Contrast - AA 5.21 - rgb(105, 39, 218) */
  --app-color-secondary-violet-200: #ddd6fe;
  /* WCAG Contrast - 3.90 - rgb(105, 39, 218) */
  --app-color-secondary-violet-300: #c3b5fd;
  /* WCAG Contrast - 2.75 - white */
  --app-color-secondary-violet-400: #a48afb;
  /* WCAG Contrast - 4.32 - white */
  --app-color-secondary-violet-500: #875bf7;
  /* WCAG Contrast - AA 5.79 - white */
  --app-color-secondary-violet-600: #7839ee;
  /* WCAG Contrast - AAA 7.25 - white */
  --app-color-secondary-violet-700: #6927da;
  /* WCAG Contrast - AAA 9.13 - white */
  --app-color-secondary-violet-800: #5720b7;
  /* WCAG Contrast - AAA 11.11 - white */
  --app-color-secondary-violet-900: #491c96;
  /* WCAG Contrast - AAA 15.39 - white */
  --app-color-secondary-violet-950: #2e125e;

  /* ===== Purple ===== */
  /* WCAG Contrast - AAA 7.41 - rgb(89, 37, 220) */
  --app-color-secondary-purple-25: #fafaff;
  /* WCAG Contrast - AAA 7.01 - rgb(89, 37, 220) */
  --app-color-secondary-purple-50: #f4f3ff;
  /* WCAG Contrast - AA 6.46 - rgb(89, 37, 220) */
  --app-color-secondary-purple-100: #ebe9fe;
  /* WCAG Contrast - AA 5.49 - rgb(89, 37, 220) */
  --app-color-secondary-purple-200: #d9d6fe;
  /* WCAG Contrast - 4.08 - rgb(89, 37, 220) */
  --app-color-secondary-purple-300: #bdb4fe;
  /* WCAG Contrast - 2.84 - white */
  --app-color-secondary-purple-400: #9b8afb;
  /* WCAG Contrast - AA 4.53 - white */
  --app-color-secondary-purple-500: #7a5af8;
  /* WCAG Contrast - AA 6.15 - white */
  --app-color-secondary-purple-600: #6938ef;
  /* WCAG Contrast - AAA 7.71 - white */
  --app-color-secondary-purple-700: #5925dc;
  /* WCAG Contrast - AAA 9.62 - white */
  --app-color-secondary-purple-800: #4a1fb8;
  /* WCAG Contrast - AAA 11.59 - white */
  --app-color-secondary-purple-900: #3e1c96;
  /* WCAG Contrast - AAA 15.73 - white */
  --app-color-secondary-purple-950: #27115f;

  /* ===== Fuchsia (New) ===== */
  /* WCAG Contrast - AA 6.24 - rgb(159, 26, 177) */
  --app-color-secondary-fuchsia-25: #fefaff;
  /* WCAG Contrast - AA 6.01 - rgb(159, 26, 177) */
  --app-color-secondary-fuchsia-50: #fdf4ff;
  /* WCAG Contrast - AA 5.55 - rgb(159, 26, 177) */
  --app-color-secondary-fuchsia-100: #fbe8ff;
  /* WCAG Contrast - AA 4.73 - rgb(159, 26, 177) */
  --app-color-secondary-fuchsia-200: #f6d0fe;
  /* WCAG Contrast - 3.62 - rgb(159, 26, 177) */
  --app-color-secondary-fuchsia-300: #eeaafd;
  /* WCAG Contrast - 2.51 - white */
  --app-color-secondary-fuchsia-400: #e478fa;
  /* WCAG Contrast - 3.56 - white */
  --app-color-secondary-fuchsia-500: #d444f1;
  /* WCAG Contrast - AA 4.87 - white */
  --app-color-secondary-fuchsia-600: #ba24d5;
  /* WCAG Contrast - AA 6.44 - white */
  --app-color-secondary-fuchsia-700: #9f1ab1;
  /* WCAG Contrast - AAA 8.44 - white */
  --app-color-secondary-fuchsia-800: #821890;
  /* WCAG Contrast - AAA 10.14 - white */
  --app-color-secondary-fuchsia-900: #6f1877;
  /* WCAG Contrast - AAA 14.53 - white */
  --app-color-secondary-fuchsia-950: #47104c;

  /* ===== Pink ===== */
  /* WCAG Contrast - AA 5.47 - rgb(193, 21, 116) */
  --app-color-secondary-pink-25: #fef6fb;
  /* WCAG Contrast - AA 5.32 - rgb(193, 21, 116) */
  --app-color-secondary-pink-50: #fdf2fa;
  /* WCAG Contrast - AA 4.94 - rgb(193, 21, 116) */
  --app-color-secondary-pink-100: #fce7f6;
  /* WCAG Contrast - 4.21 - rgb(193, 21, 116) */
  --app-color-secondary-pink-200: #fcceee;
  /* WCAG Contrast - 3.21 - rgb(193, 21, 116) */
  --app-color-secondary-pink-300: #faa7e0;
  /* WCAG Contrast - 2.60 - white */
  --app-color-secondary-pink-400: #f670c7;
  /* WCAG Contrast - 3.37 - white */
  --app-color-secondary-pink-500: #ee46bc;
  /* WCAG Contrast - 4.43 - white */
  --app-color-secondary-pink-600: #dd2590;
  /* WCAG Contrast - AA 5.81 - white */
  --app-color-secondary-pink-700: #c11574;
  /* WCAG Contrast - AAA 7.67 - white */
  --app-color-secondary-pink-800: #9e165f;
  /* WCAG Contrast - AAA 9.43 - white */
  --app-color-secondary-pink-900: #851651;
  /* WCAG Contrast - AAA 14.68 - white */
  --app-color-secondary-pink-950: #4e0d30;

  /* ===== Rosé ===== */
  /* WCAG Contrast - AA 5.78 - rgb(192, 16, 72) */
  --app-color-secondary-rose-25: #fff5f6;
  /* WCAG Contrast - AA 5.27 - rgb(192, 16, 72) */
  --app-color-secondary-rose-50: #fff1f3;
  /* WCAG Contrast - AA 4.82 - rgb(192, 16, 72) */
  --app-color-secondary-rose-100: #ffe4e8;
  /* WCAG Contrast - 4.11 - rgb(192, 16, 72) */
  --app-color-secondary-rose-200: #fecdd6;
  /* WCAG Contrast - 3.25 - rgb(192, 16, 72) */
  --app-color-secondary-rose-300: #fea3b4;
  /* WCAG Contrast - 2.67 - white */
  --app-color-secondary-rose-400: #fd6f8e;
  /* WCAG Contrast - 3.62 - white */
  --app-color-secondary-rose-500: #f63d68;
  /* WCAG Contrast - AA 4.61 - white */
  --app-color-secondary-rose-600: #e31b54;
  /* WCAG Contrast - AA 6.15 - white */
  --app-color-secondary-rose-700: #c01048;
  /* WCAG Contrast - AAA 7.86 - white */
  --app-color-secondary-rose-800: #a11043;
  /* WCAG Contrast - AAA 9.46 - white */
  --app-color-secondary-rose-900: #89123e;
  /* WCAG Contrast - AAA 14.75 - white */
  --app-color-secondary-rose-950: #510b24;

  /* ===== Orange dark (New) ===== */
  /* Can be swapped with the default warning color. */
  /* WCAG Contrast - AA 6.1 - rgb(188, 27, 6) */
  --app-color-secondary-orange-dark-25: #fff9f5;
  /* WCAG Contrast - AA 5.88 - rgb(188, 27, 6) */
  --app-color-secondary-orange-dark-50: #fff4ed;
  /* WCAG Contrast - AA 5.31 - rgb(188, 27, 6) */
  --app-color-secondary-orange-dark-100: #ffe6d5;
  /* WCAG Contrast - AA 4.69 - rgb(188, 27, 6) */
  --app-color-secondary-orange-dark-200: #ffd6ae;
  /* WCAG Contrast - 3.09 - rgb(188, 27, 6) */
  --app-color-secondary-orange-dark-300: #ff9c66;
  /* WCAG Contrast - 2.87 - white */
  --app-color-secondary-orange-dark-400: #ff692e;
  /* WCAG Contrast - 3.45 - white */
  --app-color-secondary-orange-dark-500: #ff4405;
  /* WCAG Contrast - 4.42 - white */
  --app-color-secondary-orange-dark-600: #e62e05;
  /* WCAG Contrast - AA 6.37 - white */
  --app-color-secondary-orange-dark-700: #bc1b06;
  /* WCAG Contrast - AAA 8.57 - white */
  --app-color-secondary-orange-dark-800: #97180c;
  /* WCAG Contrast - AAA 10.83 - white */
  --app-color-secondary-orange-dark-900: #771a0d;
  /* WCAG Contrast - AAA 13.97 - white */
  --app-color-secondary-orange-dark-950: #57130a;

  /* ===== Orange ===== */
  /* Can be swapped with the default warning color. */
  /* WCAG Contrast - AA 5.53 - rgb(185, 56, 21) */
  --app-color-secondary-orange-25: #fefaf5;
  /* WCAG Contrast - AA 5.36 - rgb(185, 56, 21) */
  --app-color-secondary-orange-50: #fef6ee;
  /* WCAG Contrast - AA 4.90 - rgb(185, 56, 21) */
  --app-color-secondary-orange-100: #fdead7;
  /* WCAG Contrast - 4.33 - rgb(185, 56, 21) */
  --app-color-secondary-orange-200: #f9dbaf;
  /* WCAG Contrast - 3.18 - rgb(185, 56, 21) */
  --app-color-secondary-orange-300: #f7b27a;
  /* WCAG Contrast - 2.51 - white */
  --app-color-secondary-orange-400: #f38744;
  /* WCAG Contrast - 3.13 - white */
  --app-color-secondary-orange-500: #ef6820;
  /* WCAG Contrast - 3.96 - white */
  --app-color-secondary-orange-600: #e04f16;
  /* WCAG Contrast - AA 5.75 - white */
  --app-color-secondary-orange-700: #b93815;
  /* WCAG Contrast - AAA 7.87 - white */
  --app-color-secondary-orange-800: #932f19;
  /* WCAG Contrast - AAA 9.97 - white */
  --app-color-secondary-orange-900: #772917;
  /* WCAG Contrast - AAA 13.80 - white */
  --app-color-secondary-orange-950: #511c10;

  /* ===== Yellow (New) ===== */
  /* Can be swapped with the default warning color. */
  /* WCAG Contrast - AA 5.08 - rgb(161, 92, 7) */
  --app-color-secondary-yellow-25: #fefdf0;
  /* WCAG Contrast - AA 5.01 - rgb(161, 92, 7) */
  --app-color-secondary-yellow-50: #fefbe8;
  /* WCAG Contrast - AA 4.78 - rgb(161, 92, 7) */
  --app-color-secondary-yellow-100: #fef7c3;
  /* WCAG Contrast - 4.44 - rgb(161, 92, 7) */
  --app-color-secondary-yellow-200: #feee95;
  /* WCAG Contrast - 4.02 - rgb(161, 92, 7) */
  --app-color-secondary-yellow-300: #fde272;
  /* WCAG Contrast - 1.61 - white */
  --app-color-secondary-yellow-400: #fac515;
  /* WCAG Contrast - 2.05 - white */
  --app-color-secondary-yellow-500: #eaaa08;
  /* WCAG Contrast - 3.06 - white */
  --app-color-secondary-yellow-600: #ca8504;
  /* WCAG Contrast - AA 5.20 - white */
  --app-color-secondary-yellow-700: #a15c07;
  /* WCAG Contrast - AAA 7.07 - white */
  --app-color-secondary-yellow-800: #854a0e;
  /* WCAG Contrast - AAA 8.97 - white */
  --app-color-secondary-yellow-900: #713b12;
  /* WCAG Contrast - AAA 12.10 - white */
  --app-color-secondary-yellow-950: #542c0d;
}

/* Hide Firebase emulator warning */
.firebase-emulator-warning {
  display: none !important;
}