/**
 * Modus Web Components - Variables Only
 *
 * Lightweight alternative to modus-wc-styles.css for legacy apps.
 * Contains ONLY CSS variables, theme definitions, and font declarations.
 * No Tailwind reset, no DaisyUI classes, no utility classes.
 *
 * Use this when:
 * - Your app uses Modus components inside Shadow DOM
 * - You want to avoid the Tailwind Preflight reset causing style regressions
 * - The handleShadowDOMStyles() injection handles class rules inside shadow roots
 *
 * Usage:
 *   import '@trimble-oss/moduswebcomponents/modus-wc-variables.css';
 */

/* ===== Font Declarations ===== */

/* Open Sans Variable Font - Normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/open-sans/OpenSans-VariableFont.woff2) format('woff2');
}

/* Open Sans Variable Font - Italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/open-sans/OpenSans-Italic-VariableFont.woff2)
    format('woff2');
}

/* ===== CSS Variables ===== */

:root {
  /**
  * The following variables should always match Modus
  */
  color-scheme: light dark;

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

  /* Blue Progression */
  --modus-wc-color-blue-pale: #dcedf9;
  --modus-wc-color-highlight-blue: #019aeb;
  --modus-wc-color-blue-light: #217cbb;
  --modus-wc-color-trimble-blue: #0063a3;
  --modus-wc-color-connect-blue: #00437b;
  --modus-wc-color-blue-dark: #0e416c;
  --modus-wc-color-info-blue: #004f83;
  --modus-wc-color-highlight-blue-pale: rgba(1, 154, 235, 0.5);
  --modus-wc-color-info-blue-on-dark: var(--modus-wc-color-info-blue);

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

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

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

  /* In-Field */
  --modus-wc-in-field-success-dark-bg: #00fe00;
  --modus-wc-in-field-success-light-bg: #00d22f;
  --modus-wc-in-field-warning: #ff8b00;
  --modus-wc-in-field-error: #da212c;
  --modus-wc-in-field-info: #019aeb;
  --modus-wc-in-field-avoidance: #df4eb2;
  --modus-wc-in-field-black: #000;

  /* Border width */
  --modus-wc-border-width-xs: 1px;
  --modus-wc-border-width-sm: 2px;
  --modus-wc-border-width-md: 3px;
  --modus-wc-border-width-lg: 4px;
  --modus-wc-border-width-xl: 8px;
  --modus-wc-border-width-2xl: 12px;
  --modus-wc-border-width-3xl: 24px;

  /* Border radius */
  --modus-wc-border-radius-sm: 2px;
  --modus-wc-border-radius-md: 4px;
  --modus-wc-border-radius-lg: 8px;
  --modus-wc-border-radius-xl: 12px;
  --modus-wc-border-radius-2xl: 16px;
  --modus-wc-border-radius-3xl: 24px;
  --modus-wc-border-radius-rounded: 1000px;

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

  --modus-wc-line-height-h6: 1.125rem;
  /* 18px */
  --modus-wc-line-height-h3: 1.6875rem;
  /* 27px */
  --modus-wc-line-height-h2: 1.875rem;
  /* 30px */
  --modus-wc-line-height-h1: 2.25rem;
  /* 36px */
  --modus-wc-line-height-h0: 2.75rem;
  /* 44px */

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

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

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

  /* Sizes */
  --modus-wc-size-xxs: 0.75rem;
  /* 12px */
  --modus-wc-size-xs: 1.5rem;
  /* 24px */
  --modus-wc-size-sm: 2rem;
  /* 32px */
  --modus-wc-size-md: 2.5rem;
  /* 40px */
  --modus-wc-size-lg: 3rem;
  /* 48px */
  --modus-wc-size-xl: 3.5rem;
  /* 56px */
  --modus-wc-size-xxl: 4.5rem;
  /* 72px */

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

  /* Inputs */
  --modus-wc-input-height-sm: 1.5rem;
  /* 24px */
  --modus-wc-input-height-md: 2rem;
  /* 32px */
  --modus-wc-input-height-lg: 3rem;
  /* 48px */

  /* Border Variables */
  --modus-wc-border-radius-badge: var(--modus-wc-border-radius-md);
  --modus-wc-border-radius-btn: var(--modus-wc-border-radius-lg);
  --modus-wc-border-radius-box: var(--modus-wc-border-radius-2xl);
  --modus-wc-border-radius-tab: var(--modus-wc-border-radius-lg);
  --modus-wc-border-radius-input: var(--modus-wc-border-radius-lg);
  --modus-wc-border-radius-table: var(--modus-wc-border-radius-2xl);
  --modus-wc-border-radius-chip: var(--modus-wc-border-radius-lg);
  --modus-wc-border-radius-alert: var(--modus-wc-border-radius-md);

  /* Opacity */
  --modus-wc-opacity-overlay: 0.6;

  /* Dynamic Base Colors */
  --modus-wc-color-base-page: light-dark(
    var(--modus-wc-color-white),
    var(--modus-wc-color-trimble-gray)
  );
  --modus-wc-color-base-100: light-dark(
    var(--modus-wc-color-gray-01),
    var(--modus-wc-color-gray-8)
  );
  --modus-wc-color-base-200: light-dark(
    var(--modus-wc-color-gray-02),
    var(--modus-wc-color-gray-10)
  );
  --modus-wc-color-base-300: light-dark(
    var(--modus-wc-color-gray-0),
    var(--modus-wc-color-gray-10)
  );
  --modus-wc-color-base-content: light-dark(
    var(--modus-wc-color-gray-10),
    var(--modus-wc-color-gray-1)
  );
  --modus-wc-color-base-content-low-contrast: light-dark(
    var(--modus-wc-color-gray-8),
    var(--modus-wc-color-gray-3)
  );
  --modus-wc-color-base-content-high-contrast: light-dark(
    var(--modus-wc-color-black),
    var(--modus-wc-color-white)
  );
  --modus-wc-color-base-inverted: light-dark(
    var(--modus-wc-color-gray-10),
    var(--modus-wc-color-gray-light)
  );

  /**
  * The following variables are applied to themes for applications to override.
  */

  /* Primary Colors */
  --modus-wc-color-primary: light-dark(
    var(--modus-wc-color-trimble-blue),
    var(--modus-wc-color-highlight-blue)
  );
  --modus-wc-color-primary-content: light-dark(
    var(--modus-wc-color-white),
    var(--modus-wc-color-black)
  );
  --modus-wc-color-primary-pale: light-dark(
    var(--modus-wc-color-blue-pale),
    var(--modus-wc-color-highlight-blue-pale)
  );

  /* Secondary Colors */
  --modus-wc-color-secondary: light-dark(
    var(--modus-wc-color-yellow),
    var(--modus-wc-color-yellow-light)
  );
  --modus-wc-color-secondary-content: light-dark(
    var(--modus-wc-color-black),
    var(--modus-wc-color-black)
  );
  --modus-wc-color-secondary-pale: light-dark(
    var(--modus-wc-color-yellow-pale),
    var(--modus-wc-color-yellow-pale)
  );

  /* Accent Colors */
  --modus-wc-color-accent: light-dark(
    var(--modus-wc-color-gray-6),
    var(--modus-wc-color-gray-4)
  );
  --modus-wc-color-accent-content: light-dark(
    var(--modus-wc-color-white),
    var(--modus-wc-color-black)
  );
  --modus-wc-color-accent-pale: light-dark(
    var(--modus-wc-color-gray-6),
    var(--modus-wc-color-gray-4)
  );

  /* Neutral Colors */
  --modus-wc-color-neutral: light-dark(
    var(--modus-wc-color-base-100),
    var(--modus-wc-color-base-100)
  );
  --modus-wc-color-neutral-content: light-dark(
    var(--modus-wc-color-base-content),
    var(--modus-wc-color-base-content)
  );
  --modus-wc-color-neutral-pale: light-dark(
    var(--modus-wc-color-base-100),
    var(--modus-wc-color-base-100)
  );
  --modus-wc-color-trimble-neutral: light-dark(
    var(--modus-wc-color-trimble-gray),
    var(--modus-wc-color-gray-light)
  );
  --modus-wc-color-trimble-neutral-content: light-dark(
    var(--modus-wc-color-white),
    var(--modus-wc-color-black)
  );

  /* Info Colors */
  --modus-wc-color-info: light-dark(
    var(--modus-wc-color-blue-dark),
    var(--modus-wc-color-blue-light)
  );
  --modus-wc-color-info-content: light-dark(
    var(--modus-wc-color-white),
    var(--modus-wc-color-white)
  );
  --modus-wc-color-info-pale: light-dark(
    var(--modus-wc-color-blue-pale),
    var(--modus-wc-color-blue-pale)
  );

  /* Success Colors */
  --modus-wc-color-success: light-dark(
    var(--modus-wc-color-green),
    var(--modus-wc-color-green-light)
  );
  --modus-wc-color-success-content: light-dark(
    var(--modus-wc-color-white),
    var(--modus-wc-color-black)
  );
  --modus-wc-color-success-pale: light-dark(
    var(--modus-wc-color-green-pale),
    var(--modus-wc-color-green-pale)
  );

  /* Warning Colors */
  --modus-wc-color-warning: light-dark(
    var(--modus-wc-color-yellow-dark),
    var(--modus-wc-color-yellow-light)
  );
  --modus-wc-color-warning-content: light-dark(
    var(--modus-wc-color-black),
    var(--modus-wc-color-black)
  );
  --modus-wc-color-warning-pale: light-dark(
    var(--modus-wc-color-yellow-pale),
    var(--modus-wc-color-yellow-pale)
  );

  /* Error Colors */
  --modus-wc-color-error: light-dark(
    var(--modus-wc-color-red),
    var(--modus-wc-color-red-light)
  );
  --modus-wc-color-error-content: light-dark(
    var(--modus-wc-color-white),
    var(--modus-wc-color-black)
  );
  --modus-wc-color-error-pale: light-dark(
    var(--modus-wc-color-red-pale),
    var(--modus-wc-color-red-pale)
  );

  /* Tailwind Colors */
  /* Slate */

  /* Orange */
  --tw-orange-50: #fff7ed;
  --tw-orange-100: #ffedd5;
  --tw-orange-200: #fed7aa;
  --tw-orange-300: #fdba74;
  --tw-orange-400: #fb923c;
  --tw-orange-500: #f97316;
  --tw-orange-600: #ea580c;
  --tw-orange-700: #c2410c;
  --tw-orange-800: #9a3412;
  --tw-orange-900: #7c2d12;
  --tw-orange-950: #431407;

  /* Amber */
  --tw-amber-50: #fffbeb;
  --tw-amber-100: #fef3c7;
  --tw-amber-200: #fde68a;
  --tw-amber-300: #fcd34d;
  --tw-amber-400: #fbbf24;
  --tw-amber-500: #f59e0b;
  --tw-amber-600: #d97706;
  --tw-amber-700: #b45309;
  --tw-amber-800: #92400e;
  --tw-amber-900: #78350f;
  --tw-amber-950: #451a03;

  /* Lime */
  --tw-lime-50: #f7fee7;
  --tw-lime-100: #ecfccb;
  --tw-lime-200: #d9f99d;
  --tw-lime-300: #bef264;
  --tw-lime-400: #a3e635;
  --tw-lime-500: #84cc16;
  --tw-lime-600: #65a30d;
  --tw-lime-700: #4d7c0f;
  --tw-lime-800: #3f6212;
  --tw-lime-900: #365314;
  --tw-lime-950: #1a2e05;

  /* Emerald */
  --tw-emerald-50: #ecfdf5;
  --tw-emerald-100: #d1fae5;
  --tw-emerald-200: #a7f3d0;
  --tw-emerald-300: #6ee7b7;
  --tw-emerald-400: #34d399;
  --tw-emerald-500: #10b981;
  --tw-emerald-600: #059669;
  --tw-emerald-700: #047857;
  --tw-emerald-800: #065f46;
  --tw-emerald-900: #064e3b;
  --tw-emerald-950: #022c22;

  /* Teal */
  --tw-teal-50: #f0fdfa;
  --tw-teal-100: #ccfbf1;
  --tw-teal-200: #99f6e4;
  --tw-teal-300: #5eead4;
  --tw-teal-400: #2dd4bf;
  --tw-teal-500: #14b8a6;
  --tw-teal-600: #0d9488;
  --tw-teal-700: #0f766e;
  --tw-teal-800: #115e59;
  --tw-teal-900: #134e4a;
  --tw-teal-950: #042f2e;

  /* Cyan */
  --tw-cyan-50: #ecfeff;
  --tw-cyan-100: #cffafe;
  --tw-cyan-200: #a5f3fc;
  --tw-cyan-300: #67e8f9;
  --tw-cyan-400: #22d3ee;
  --tw-cyan-500: #06b6d4;
  --tw-cyan-600: #0891b2;
  --tw-cyan-700: #0e7490;
  --tw-cyan-800: #155e75;
  --tw-cyan-900: #164e63;
  --tw-cyan-950: #083344;

  /* Indigo */
  --tw-indigo-50: #eef2ff;
  --tw-indigo-100: #e0e7ff;
  --tw-indigo-200: #c7d2fe;
  --tw-indigo-300: #a5b4fc;
  --tw-indigo-400: #818cf8;
  --tw-indigo-500: #6366f1;
  --tw-indigo-600: #4f46e5;
  --tw-indigo-700: #4338ca;
  --tw-indigo-800: #3730a3;
  --tw-indigo-900: #312e81;
  --tw-indigo-950: #1e1b4b;

  /* Violet */
  --tw-violet-50: #f5f3ff;
  --tw-violet-100: #ede9fe;
  --tw-violet-200: #ddd6fe;
  --tw-violet-300: #c4b5fd;
  --tw-violet-400: #a78bfa;
  --tw-violet-500: #8b5cf6;
  --tw-violet-600: #7c3aed;
  --tw-violet-700: #6d28d9;
  --tw-violet-800: #5b21b6;
  --tw-violet-900: #4c1d95;
  --tw-violet-950: #2e1065;

  /* Purple */
  --tw-purple-50: #faf5ff;
  --tw-purple-100: #f3e8ff;
  --tw-purple-200: #e9d5ff;
  --tw-purple-300: #d8b4fe;
  --tw-purple-400: #c084fc;
  --tw-purple-500: #a855f7;
  --tw-purple-600: #9333ea;
  --tw-purple-700: #7e22ce;
  --tw-purple-800: #6b21a8;
  --tw-purple-900: #581c87;
  --tw-purple-950: #3b0764;

  /* Fuchsia */
  --tw-fuchsia-50: #fdf4ff;
  --tw-fuchsia-100: #fae8ff;
  --tw-fuchsia-200: #f5d0fe;
  --tw-fuchsia-300: #f0abfc;
  --tw-fuchsia-400: #e879f9;
  --tw-fuchsia-500: #d946ef;
  --tw-fuchsia-600: #c026d3;
  --tw-fuchsia-700: #a21caf;
  --tw-fuchsia-800: #86198f;
  --tw-fuchsia-900: #701a75;
  --tw-fuchsia-950: #4a044e;

  /* Pink */
  --tw-pink-50: #fdf2f8;
  --tw-pink-100: #fce7f3;
  --tw-pink-200: #fbcfe8;
  --tw-pink-300: #f9a8d4;
  --tw-pink-400: #f47286;
  --tw-pink-500: #ec4899;
  --tw-pink-600: #db2777;
  --tw-pink-700: #be185d;
  --tw-pink-800: #9d174d;
  --tw-pink-900: #831843;
  --tw-pink-950: #500724;

  /* Rose */
  --tw-rose-50: #fff1f2;
  --tw-rose-100: #ffe4e6;
  --tw-rose-200: #fecdd3;
  --tw-rose-300: #fda4af;
  --tw-rose-400: #fb7185;
  --tw-rose-500: #f43f5e;
  --tw-rose-600: #e11d48;
  --tw-rose-700: #be123c;
  --tw-rose-800: #9f1239;
  --tw-rose-900: #881337;
  --tw-rose-950: #4c0519;

  /* Tailwind Dynamic Colors */

  /* Orange */
  --modus-tw-color-orange-100: light-dark(
    var(--tw-orange-600),
    var(--tw-orange-100)
  );
  --modus-tw-color-orange-200: light-dark(
    var(--tw-orange-700),
    var(--tw-orange-200)
  );
  --modus-tw-color-orange-300: light-dark(
    var(--tw-orange-800),
    var(--tw-orange-300)
  );
  --modus-tw-color-orange-400: light-dark(
    var(--tw-orange-900),
    var(--tw-orange-400)
  );

  /* Amber */
  --modus-tw-color-amber-100: light-dark(
    var(--tw-amber-600),
    var(--tw-amber-100)
  );
  --modus-tw-color-amber-200: light-dark(
    var(--tw-amber-700),
    var(--tw-amber-200)
  );
  --modus-tw-color-amber-300: light-dark(
    var(--tw-amber-800),
    var(--tw-amber-300)
  );
  --modus-tw-color-amber-400: light-dark(
    var(--tw-amber-900),
    var(--tw-amber-400)
  );

  /* Lime */
  --modus-tw-color-lime-100: light-dark(var(--tw-lime-600), var(--tw-lime-100));
  --modus-tw-color-lime-200: light-dark(var(--tw-lime-700), var(--tw-lime-200));
  --modus-tw-color-lime-300: light-dark(var(--tw-lime-800), var(--tw-lime-300));
  --modus-tw-color-lime-400: light-dark(var(--tw-lime-900), var(--tw-lime-400));

  /* Emerald */
  --modus-tw-color-emerald-100: light-dark(
    var(--tw-emerald-600),
    var(--tw-emerald-100)
  );
  --modus-tw-color-emerald-200: light-dark(
    var(--tw-emerald-700),
    var(--tw-emerald-200)
  );
  --modus-tw-color-emerald-300: light-dark(
    var(--tw-emerald-800),
    var(--tw-emerald-300)
  );
  --modus-tw-color-emerald-400: light-dark(
    var(--tw-emerald-900),
    var(--tw-emerald-400)
  );

  /* Teal */
  --modus-tw-color-teal-100: light-dark(var(--tw-teal-600), var(--tw-teal-100));
  --modus-tw-color-teal-200: light-dark(var(--tw-teal-700), var(--tw-teal-200));
  --modus-tw-color-teal-300: light-dark(var(--tw-teal-800), var(--tw-teal-300));
  --modus-tw-color-teal-400: light-dark(var(--tw-teal-900), var(--tw-teal-400));

  /* Cyan */
  --modus-tw-color-cyan-100: light-dark(var(--tw-cyan-600), var(--tw-cyan-100));
  --modus-tw-color-cyan-200: light-dark(var(--tw-cyan-700), var(--tw-cyan-200));
  --modus-tw-color-cyan-300: light-dark(var(--tw-cyan-800), var(--tw-cyan-300));
  --modus-tw-color-cyan-400: light-dark(var(--tw-cyan-900), var(--tw-cyan-400));

  /* Indigo */
  --modus-tw-color-indigo-100: light-dark(
    var(--tw-indigo-600),
    var(--tw-indigo-100)
  );
  --modus-tw-color-indigo-200: light-dark(
    var(--tw-indigo-700),
    var(--tw-indigo-200)
  );
  --modus-tw-color-indigo-300: light-dark(
    var(--tw-indigo-800),
    var(--tw-indigo-300)
  );
  --modus-tw-color-indigo-400: light-dark(
    var(--tw-indigo-900),
    var(--tw-indigo-400)
  );

  /* Violet */
  --modus-tw-color-violet-100: light-dark(
    var(--tw-violet-600),
    var(--tw-violet-100)
  );
  --modus-tw-color-violet-200: light-dark(
    var(--tw-violet-700),
    var(--tw-violet-200)
  );
  --modus-tw-color-violet-300: light-dark(
    var(--tw-violet-800),
    var(--tw-violet-300)
  );
  --modus-tw-color-violet-400: light-dark(
    var(--tw-violet-900),
    var(--tw-violet-400)
  );

  /* Purple */
  --modus-tw-color-purple-100: light-dark(
    var(--tw-purple-600),
    var(--tw-purple-100)
  );
  --modus-tw-color-purple-200: light-dark(
    var(--tw-purple-700),
    var(--tw-purple-200)
  );
  --modus-tw-color-purple-300: light-dark(
    var(--tw-purple-800),
    var(--tw-purple-300)
  );
  --modus-tw-color-purple-400: light-dark(
    var(--tw-purple-900),
    var(--tw-purple-400)
  );

  /* Fuchsia */
  --modus-tw-color-fuchsia-100: light-dark(
    var(--tw-fuchsia-600),
    var(--tw-fuchsia-100)
  );
  --modus-tw-color-fuchsia-200: light-dark(
    var(--tw-fuchsia-700),
    var(--tw-fuchsia-200)
  );
  --modus-tw-color-fuchsia-300: light-dark(
    var(--tw-fuchsia-800),
    var(--tw-fuchsia-300)
  );
  --modus-tw-color-fuchsia-400: light-dark(
    var(--tw-fuchsia-900),
    var(--tw-fuchsia-400)
  );

  /* Pink */
  --modus-tw-color-pink-100: light-dark(var(--tw-pink-600), var(--tw-pink-100));
  --modus-tw-color-pink-200: light-dark(var(--tw-pink-700), var(--tw-pink-200));
  --modus-tw-color-pink-300: light-dark(var(--tw-pink-800), var(--tw-pink-300));
  --modus-tw-color-pink-400: light-dark(var(--tw-pink-900), var(--tw-pink-400));

  /* Rose */
  --modus-tw-color-rose-100: light-dark(var(--tw-rose-600), var(--tw-rose-100));
  --modus-tw-color-rose-200: light-dark(var(--tw-rose-700), var(--tw-rose-200));
  --modus-tw-color-rose-300: light-dark(var(--tw-rose-800), var(--tw-rose-300));
  --modus-tw-color-rose-400: light-dark(var(--tw-rose-900), var(--tw-rose-400));
}

/* ===== Theme Overrides ===== */

/* Modus Modern Themes */
[data-theme='modus-modern-light']:root {
  color-scheme: light;
  --modus-wc-color-base-page: var(--modus-wc-color-white);
  --modus-wc-color-base-100: var(--modus-wc-color-gray-01);
  --modus-wc-color-base-200: var(--modus-wc-color-gray-02);
  --modus-wc-color-base-300: var(--modus-wc-color-gray-1);
  --modus-wc-color-base-content: var(--modus-wc-color-gray-10);
  --modus-wc-color-primary: var(--modus-wc-color-trimble-blue);
  --modus-wc-color-primary-content: var(--modus-wc-color-white);
  --modus-wc-color-info-blue-on-dark: var(--modus-wc-color-info-blue);
  --animation-btn: 0.3s;
  --animation-input: 0.2s;
  --tab-border: 1px;
  --rounded-badge: 0.25rem;
  --border-btn: 1px;
  --btn-focus-scale: 0.98;
  --rounded-btn: 0.5rem;
  --rounded-box: 1rem;
  --tab-radius: 0.25rem;
  --alert-border-left-width: 0.5rem;
  --alert-border-width: 1px;
  --alert-border-radius: 0.5rem;
  --input-bottom-border-width: 1px;
  --p: 48.6221% 0.128075 247.073947;
  --pc: 100% 0 0;
  --s: 80.3357% 0.161017 74.410202;
  --sc: 0% 0 0;
  --a: 53.8572% 0.017812 269.820069;
  --ac: 100% 0 0;
  --n: 84.9436% 0.012605 276.068713;
  --nc: 28.1705% 0.01025 242.054501;
  --b1: 100% 0 0;
  --b2: 84.9436% 0.012605 276.068713;
  --b3: 78.7221% 0.014241 277.004909;
  --bc: 28.1705% 0.01025 242.054501;
  --in: 48.6221% 0.128075 247.073947;
  --inc: 100% 0 0;
  --su: 55.824% 0.14148 150.027193;
  --suc: 100% 0 0;
  --wa: 72.9405% 0.149372 67.994075;
  --wac: 28.1705% 0.01025 242.054501;
  --er: 57.1169% 0.215546 25.349404;
  --erc: 100% 0 0;
}

[data-theme='modus-modern-dark']:root {
  color-scheme: dark;
  --modus-wc-color-base-page: var(--modus-wc-color-gray-10);
  --modus-wc-color-base-100: var(--modus-wc-color-gray-9);
  --modus-wc-color-base-200: var(--modus-wc-color-gray-8);
  --modus-wc-color-base-300: var(--modus-wc-color-trimble-gray);
  --modus-wc-color-base-content: var(--modus-wc-color-gray-1);
  --modus-wc-color-primary: var(--modus-wc-color-highlight-blue);
  --modus-wc-color-primary-content: var(--modus-wc-color-black);
  --modus-wc-color-info-blue-on-dark: var(--modus-wc-color-white);
  --animation-btn: 0.3s;
  --animation-input: 0.2s;
  --tab-border: 1px;
  --rounded-badge: 0.25rem;
  --border-btn: 1px;
  --btn-focus-scale: 0.98;
  --rounded-btn: 0.5rem;
  --rounded-box: 1rem;
  --tab-radius: 0.25rem;
  --alert-border-left-width: 0.5rem;
  --alert-border-width: 1px;
  --alert-border-radius: 0.5rem;
  --input-bottom-border-width: 1px;
  --p: 65.9524% 0.159801 243.168715;
  --pc: 0% 0 0;
  --s: 84.7174% 0.139742 78.603787;
  --sc: 0% 0 0;
  --a: 53.8572% 0.017812 269.820069;
  --ac: 100% 0 0;
  --n: 34.6043% 0.012501 252.973394;
  --nc: 100% 0 0;
  --b1: 22.215% 0.008445 223.858126;
  --b2: 34.6043% 0.012501 252.973394;
  --b3: 41.0842% 0.013405 256.755726;
  --bc: 100% 0 0;
  --in: 56.5592% 0.127092 244.53102;
  --inc: 100% 0 0;
  --su: 64.9048% 0.158119 142.023063;
  --suc: 0% 0 0;
  --wa: 84.7174% 0.139742 78.603787;
  --wac: 28.1705% 0.01025 242.054501;
  --er: 66.6026% 0.165819 22.664876;
  --erc: 0% 0 0;
}

/* Modus Classic Themes */
[data-theme='modus-classic-light']:root {
  color-scheme: light;
  --modus-wc-color-base-page: var(--modus-wc-color-white);
  --modus-wc-color-base-100: var(--modus-wc-color-gray-light);
  --modus-wc-color-base-200: var(--modus-wc-color-gray-1);
  --modus-wc-color-base-300: var(--modus-wc-color-gray-2);
  --modus-wc-color-base-content: var(--modus-wc-color-gray-10);
  --modus-wc-color-info: var(--modus-wc-color-trimble-blue);
  --modus-wc-color-success: var(--modus-wc-color-green);
  --modus-wc-color-error: var(--modus-wc-color-red);
  --modus-wc-color-warning: var(--modus-wc-color-yellow);
  --modus-wc-color-info-blue-on-dark: var(--modus-wc-color-info-blue);
  --animation-btn: 0.3s;
  --animation-input: 0.2s;
  --tab-border: 1px;
  --rounded-badge: 0.25rem;
  --border-btn: 1px;
  --btn-focus-scale: 0.98;
  --rounded-btn: 0.25rem;
  --rounded-box: 0.5rem;
  --tab-radius: 0.25rem;
  --alert-border-left-width: 0.5rem;
  --alert-border-width: 1px;
  --alert-border-radius: 0.5rem;
  --input-bottom-border-width: 1px;
  --p: 48.6221% 0.128075 247.073947;
  --pc: 100% 0 0;
  --s: 53.8572% 0.017812 269.820069;
  --sc: 100% 0 0;
  --a: 53.8572% 0.017812 269.820069;
  --ac: 100% 0 0;
  --n: 84.9436% 0.012605 276.068713;
  --nc: 28.1705% 0.01025 242.054501;
  --b1: 100% 0 0;
  --b2: 84.9436% 0.012605 276.068713;
  --b3: 78.7221% 0.014241 277.004909;
  --bc: 28.1705% 0.01025 242.054501;
  --in: 48.6221% 0.128075 247.073947;
  --inc: 100% 0 0;
  --su: 55.824% 0.14148 150.027193;
  --suc: 100% 0 0;
  --wa: 80.3357% 0.161017 74.410202;
  --wac: 28.1705% 0.01025 242.054501;
  --er: 57.1169% 0.215546 25.349404;
  --erc: 100% 0 0;
}

[data-theme='modus-classic-dark']:root {
  color-scheme: dark;
  --modus-wc-color-base-page: var(--modus-wc-color-black);
  --modus-wc-color-base-100: var(--modus-wc-color-trimble-gray);
  --modus-wc-color-base-200: var(--modus-wc-color-gray-8);
  --modus-wc-color-base-300: var(--modus-wc-color-gray-9);
  --modus-wc-color-base-content: var(--modus-wc-color-gray-1);
  --modus-wc-color-info: var(--modus-wc-color-trimble-blue);
  --modus-wc-color-success: var(--modus-wc-color-green);
  --modus-wc-color-error: var(--modus-wc-color-red);
  --modus-wc-color-warning: var(--modus-wc-color-yellow);
  --modus-wc-color-info-blue-on-dark: var(--modus-wc-color-white);
  --animation-btn: 0.3s;
  --animation-input: 0.2s;
  --tab-border: 1px;
  --rounded-badge: 0.25rem;
  --border-btn: 1px;
  --btn-focus-scale: 0.98;
  --rounded-btn: 0.25rem;
  --rounded-box: 0.5rem;
  --tab-radius: 0.25rem;
  --alert-border-left-width: 0.5rem;
  --alert-border-width: 1px;
  --alert-border-radius: 0.5rem;
  --input-bottom-border-width: 1px;
  --p: 48.6221% 0.128075 247.073947;
  --pc: 100% 0 0;
  --s: 80.3357% 0.161017 74.410202;
  --sc: 28.1705% 0.01025 242.054501;
  --a: 53.8572% 0.017812 269.820069;
  --ac: 100% 0 0;
  --n: 34.6043% 0.012501 252.973394;
  --nc: 100% 0 0;
  --b1: 22.215% 0.008445 223.858126;
  --b2: 34.6043% 0.012501 252.973394;
  --b3: 41.0842% 0.013405 256.755726;
  --bc: 100% 0 0;
  --in: 48.6221% 0.128075 247.073947;
  --inc: 100% 0 0;
  --su: 55.824% 0.14148 150.027193;
  --suc: 100% 0 0;
  --wa: 80.3357% 0.161017 74.410202;
  --wac: 28.1705% 0.01025 242.054501;
  --er: 57.1169% 0.215546 25.349404;
  --erc: 100% 0 0;
}

/* Connect Themes */
[data-theme='connect-light']:root {
  color-scheme: light;
  --modus-wc-color-base-page: var(--modus-wc-color-white);
  --modus-wc-color-base-100: var(--modus-wc-color-gray-light);
  --modus-wc-color-base-200: var(--modus-wc-color-gray-1);
  --modus-wc-color-base-300: var(--modus-wc-color-gray-2);
  --modus-wc-color-base-content: var(--modus-wc-color-gray-10);
  --modus-wc-color-info-blue-on-dark: var(--modus-wc-color-info-blue);
  --animation-btn: 0.3s;
  --animation-input: 0.2s;
  --tab-border: 1px;
  --rounded-badge: 2px;
  --border-btn: 1px;
  --btn-focus-scale: 1;
  --rounded-btn: 2px;
  --rounded-box: 0;
  --tab-radius: 0;
  --alert-border-left-width: 0;
  --alert-border-width: 0;
  --alert-border-radius: 4px;
  --input-bottom-border-width: 2px;
  --input-radius: 2px;
  --p: 47.3235% 0.12603 247.547196;
  --pc: 100% 0 0;
  --s: 52.6234% 0.020228 289.216784;
  --sc: 100% 0 0;
  --a: 53.8572% 0.017812 269.820069;
  --ac: 100% 0 0;
  --n: 84.9436% 0.012605 276.068713;
  --nc: 28.1705% 0.01025 242.054501;
  --b1: 100% 0 0;
  --b2: 84.9436% 0.012605 276.068713;
  --b3: 78.7221% 0.014241 277.004909;
  --bc: 28.1705% 0.01025 242.054501;
  --in: 48.6221% 0.128075 247.073947;
  --inc: 100% 0 0;
  --su: 66.4599% 0.13954 132.331914;
  --suc: 100% 0 0;
  --wa: 83.8398% 0.172209 83.573967;
  --wac: 28.1705% 0.01025 242.054501;
  --er: 56.8372% 0.205089 24.549972;
  --erc: 100% 0 0;
}

[data-theme='connect-dark']:root {
  color-scheme: dark;
  --modus-wc-color-base-page: var(--modus-wc-color-black);
  --modus-wc-color-base-100: var(--modus-wc-color-trimble-gray);
  --modus-wc-color-base-200: var(--modus-wc-color-gray-8);
  --modus-wc-color-base-300: var(--modus-wc-color-gray-9);
  --modus-wc-color-base-content: var(--modus-wc-color-gray-1);
  --modus-wc-color-info-blue-on-dark: var(--modus-wc-color-white);
  --animation-btn: 0.3s;
  --animation-input: 0.2s;
  --tab-border: 1px;
  --rounded-badge: 2px;
  --border-btn: 1px;
  --btn-focus-scale: 1;
  --rounded-btn: 2px;
  --rounded-box: 0;
  --tab-radius: 0;
  --alert-border-left-width: 0;
  --alert-border-width: 0;
  --alert-border-radius: 4px;
  --input-bottom-border-width: 2px;
  --input-radius: 2px;
  --p: 65.9524% 0.159801 243.168715;
  --pc: 0% 0 0;
  --s: 95.9569% 0.006653 286.273689;
  --sc: 0% 0 0;
  --a: 53.8572% 0.017812 269.820069;
  --ac: 100% 0 0;
  --n: 34.6043% 0.012501 252.973394;
  --nc: 100% 0 0;
  --b1: 22.215% 0.008445 223.858126;
  --b2: 34.6043% 0.012501 252.973394;
  --b3: 41.0842% 0.013405 256.755726;
  --bc: 100% 0 0;
  --in: 56.5592% 0.127092 244.53102;
  --inc: 100% 0 0;
  --su: 64.9048% 0.158119 142.023063;
  --suc: 0% 0 0;
  --wa: 84.7174% 0.139742 78.603787;
  --wac: 28.1705% 0.01025 242.054501;
  --er: 66.6026% 0.165819 22.664876;
  --erc: 0% 0 0;
}