:root {
  /* Primary Colors */
  --modus-color-primary: var(--modus-color-trimble-blue);
  --modus-color-primary-content: var(--modus-color-white);

  /* Secondary Colors */
  --modus-color-secondary: var(--modus-color-yellow);
  --modus-color-secondary-content: var(--modus-color-trimble-gray);

  /* Accent Colors */
  --modus-color-accent: var(--modus-color-gray-6);
  --modus-color-accent-content: var(--modus-color-white);

  /* Neutral Colors */
  --modus-color-neutral: var(--modus-color-gray-9);
  --modus-color-neutral-content: var(--modus-color-white);

  /* Base Colors */
  --modus-color-base-100: var(--modus-color-gray-1);
  --modus-color-base-200: var(--modus-color-gray-2);
  --modus-color-base-300: var(--modus-color-gray-3);
  --modus-color-base-content: var(--modus-color-trimble-gray);

  /* Info Colors */
  --modus-color-info: var(--modus-color-trimble-blue);
  --modus-color-info-content: var(--modus-color-white);

  /* Success Colors */
  --modus-color-success: var(--modus-color-green);
  --modus-color-success-content: var(--modus-color-white);

  /* Warning Colors */
  --modus-color-warning: var(--modus-color-yellow);
  --modus-color-warning-content: var(--modus-color-trimble-gray);

  /* Error Colors */
  --modus-color-error: var(--modus-color-red);
  --modus-color-error-content: var(--modus-color-white);

  /* In-Field */
  --modus-color-in-field-success-dark-bg: #00fe00;
  --modus-color-in-field-success-light-bg: #00d22f;
  --modus-color-in-field-warning: #ff8b00;
  --modus-color-in-field-error: var(--modus-color-red);
  --modus-color-in-field-info: var(--modus-color-highlight-blue);
  --modus-color-in-field-avoidance: #df4eb2;
  --modus-color-in-field-black: #000000;

  /* Neutral Progression */
  --modus-color-white: #ffffff;
  --modus-color-gray-light: #f1f1f6;
  --modus-color-gray-0: #e0e1e9;
  --modus-color-gray-1: #cbcdd6;
  --modus-color-gray-2: #b7b9c3;
  --modus-color-gray-3: #a3a6b1;
  --modus-color-gray-4: #90939f;
  --modus-color-gray-5: #7d808d;
  --modus-color-gray-6: #6a6e79;
  --modus-color-gray-7: #585c65;
  --modus-color-gray-8: #464b52;
  --modus-color-gray-9: #353a40;
  --modus-color-gray-10: #171c1e;
  --modus-color-trimble-gray: #252a2e;
  --modus-color-black: #000000;

  /* Blue Progression */
  --modus-color-blue-pale: #dcedf9;
  --modus-color-highlight-blue: #019aeb;
  --modus-color-blue-light: #217cbb;
  --modus-color-trimble-blue: #0063a3;
  --modus-color-blue-dark: #0e416c;

  /* Yellow Progression */
  --modus-color-yellow-pale: #fff5e4;
  --modus-color-yellow-light: #fec157;
  --modus-color-yellow: #fbad26;
  --modus-color-yellow-dark: #e49325;

  /* Red Progression */
  --modus-color-red-pale: #fbd4d7;
  --modus-color-red-light: #e86363;
  --modus-color-red: #da212c;
  --modus-color-red-dark: #ab1f26;

  /* Green Progression */
  --modus-color-green-pale: #e0eccf;
  --modus-color-green-light: #4ea646;
  --modus-color-green: #1e8a44;
  --modus-color-green-dark: #006638;

  /* Borders */
  --modus-border-radius-sm: 2px;
  --modus-border-radius-md: 4px;
  --modus-border-radius-lg: 8px;

  --modus-border-width-sm: 1px;
  --modus-border-width-md: 2px;
  --modus-border-width-lg: 3px;
  --modus-border-width-xl: 4px;

  /* Line heights */
  --modus-line-height-xs: 0.5rem;
  --modus-line-height-sm: 1rem;
  --modus-line-height-md: 1.5rem;
  --modus-line-height-lg: 2rem;
  --modus-line-height-xl: 3rem;

  /* Font Family */
  --modus-font-family:
    'Open Sans', 'Segoe UI', 'Noto Sans', 'San Francisco', 'Helvetica', 'Arial',
    sans-serif;

  /* Font Sizes */
  --modus-font-size-xs: 0.625rem; /* 10px */
  --modus-font-size-sm: 0.75rem; /* 12px */
  --modus-font-size-md: 0.875rem; /* 14px */
  --modus-font-size-lg: 1rem; /* 16px */
  --modus-font-size-xl: 1.125rem; /* 18px */
  --modus-font-size-2xl: 1.25rem; /* 20px */
  --modus-font-size-3xl: 1.5rem; /* 24px */

  /* Font Weights */
  --modus-font-weight-light: 300;
  --modus-font-weight-normal: 400;
  --modus-font-weight-semibold: 600;
  --modus-font-weight-bold: 700;

  /* Spacing */
  --modus-spacing-xs: 0.25rem; /* 4px */
  --modus-spacing-sm: 0.5rem; /* 8px */
  --modus-spacing-md: 0.75rem; /* 12px */
  --modus-spacing-lg: 1rem; /* 16px */
  --modus-spacing-xl: 1.5rem; /* 24px */
  --modus-spacing-2xl: 2rem; /* 32px */
  --modus-spacing-3xl: 3rem; /* 48px */

  /* Inputs */
  --modus-input-height-sm: 1.5rem;
  --modus-input-height-md: 2rem;
  --modus-input-height-lg: 2.5rem;

  /* Box Shadows */
  --modus-box-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Gradients */
  --modus-gradient-ai: linear-gradient(
    90deg,
    #00d7c0 0%,
    #009afe 33%,
    #4a00ff 55%,
    #ff2092 78%,
    #ff00d3 96%
  );
}