@layer theme {
    :root, :host {
      --color-orange-50: #fff6ed;
      --color-orange-400: #fd853a;
      --color-orange-500: #fb6514;
      --color-blue-500: #93D500;
      --color-gray-50: #f9fafb;
      --color-gray-100: #f2f4f7;
      --color-gray-200: #e4e7ec;
      --color-gray-300: #d0d5dd;
      --color-gray-400: #98a2b3;
      --color-gray-500: #667085;
      --color-gray-600: #475467;
      --color-gray-700: #344054;
      --color-gray-800: #1d2939;
      --color-gray-900: #101828;
      --color-black: #101828;
      --color-white: #ffffff;

      /* Updated Brand Colors based on #93D500 */
      --color-brand-50: #f6fce9;
      --color-brand-100: #e9f8cc;
      --color-brand-200: #d8f2a3;
      --color-brand-300: #c1e970;
      --color-brand-400: #a8dd3d;
      --color-brand-500: #93d500;
      --color-brand-600: #7ab800;
      --color-brand-800: #4e7a00;
      --color-brand-950: #4e7a00;

      /* Rest of your existing variables... */
      --spacing: 0.25rem;
      --container-xs: 20rem;
      --container-md: 28rem;
      --text-xs: 0.75rem;
      --text-xs--line-height: calc(1 / 0.75);
      --text-sm: 0.875rem;
      --text-sm--line-height: calc(1.25 / 0.875);
      --text-base: 1rem;
      --text-base--line-height: calc(1.5 / 1);
      --text-lg: 1.125rem;
      --text-lg--line-height: calc(1.75 / 1.125);
      --text-xl: 1.25rem;
      --text-xl--line-height: calc(1.75 / 1.25);
      --text-2xl: 1.5rem;
      --text-2xl--line-height: calc(2 / 1.5);
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --leading-tight: 1.25;
      --leading-normal: 1.5;
      --radius-sm: 0.25rem;
      --radius-md: 0.375rem;
      --radius-lg: 0.5rem;
      --radius-xl: 0.75rem;
      --radius-2xl: 1rem;
      --radius-3xl: 1.5rem;
      --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
      --animate-spin: spin 1s linear infinite;
      --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
      --aspect-video: 16 / 9;
      --default-transition-duration: 150ms;
      --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      --default-font-family: var(--font-sans);
      --default-font-feature-settings: var(--font-sans--font-feature-settings);
      --default-font-variation-settings: var(
        --font-sans--font-variation-settings
      );
      --default-mono-font-family: var(--font-mono);
      --default-mono-font-feature-settings: var(
        --font-mono--font-feature-settings
      );
      --default-mono-font-variation-settings: var(
        --font-mono--font-variation-settings
      );
      --font-outfit: Outfit, sans-serif;
      --breakpoint-2xl: 1536px;
      --text-title-2xl: 72px;
      --text-title-2xl--line-height: 90px;
      --text-title-xl: 60px;
      --text-title-xl--line-height: 72px;
      --text-title-lg: 48px;
      --text-title-lg--line-height: 60px;
      --text-title-md: 36px;
      --text-title-md--line-height: 44px;
      --text-title-sm: 30px;
      --text-title-sm--line-height: 38px;
      --text-title-xs: 24px;
      --text-title-xs--line-height: 32px;
      --text-theme-xl: 20px;
      --text-theme-xl--line-height: 30px;
      --text-theme-sm: 14px;
      --text-theme-sm--line-height: 20px;
      --text-theme-xs: 12px;
      --text-theme-xs--line-height: 18px;

      /* Updated Blue Light Colors to complement your green brand color */
      --color-blue-light-50: #f0f9f5;  /* Very light greenish-blue */
      --color-blue-light-500: #00b0a1;  /* Teal that works well with your green */
      --color-blue-light-600: #008c7a;  /* Darker teal for contrast */

      --color-gray-dark: #1a2231;
      --color-success-50: #ecfdf3;
      --color-success-300: #6ce9a6;
      --color-success-500: #12b76a;
      --color-success-600: #039855;
      --color-success-700: #027a48;
      --color-success-800: #05603a;
      --color-error-50: #fef3f2;
      --color-error-300: #fda29b;
      --color-error-400: #f97066;
      --color-error-500: #f04438;
      --color-error-600: #d92d20;
      --color-error-700: #b42318;
      --color-error-800: #912018;
      --color-warning-50: #fffaeb;
      --color-warning-400: #fdb022;
      --color-warning-500: #f79009;
      --color-warning-600: #dc6803;
      --color-warning-700: #b54708;
      --color-theme-pink-500: #ee46bc;
      --color-theme-purple-500: #7a5af8;
      --drop-shadow-4xl: 0 35px 35px rgba(0, 0, 0, 0.25),
      0 45px 65px rgba(0, 0, 0, 0.15);
      --z-index-1: 1;
      --z-index-9: 9;
      --z-index-999: 999;
      --z-index-9999: 9999;
      --z-index-99999: 99999;
      --z-index-999999: 999999;
    }
  }

  :root {
    --background: 210 20% 98%;
    --foreground: 215 25% 15%;
    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 15%;
    --primary: 215 70% 20%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 15% 95%;
    --secondary-foreground: 215 25% 15%;
    --muted: 210 15% 92%;
    --muted-foreground: 215 15% 45%;
    --accent: 152 60% 45%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214 20% 88%;
    --input: 214 20% 88%;
    --ring: 215 70% 20%;
    --radius: .75rem;
    --gradient-primary: linear-gradient(135deg, hsl(215 70% 20%) 0%, hsl(215 60% 35%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(152 60% 45%) 0%, hsl(152 50% 55%) 100%);
    --shadow-card: 0 4px 24px -4px hsl(215 25% 15% / .08);
    --shadow-card-hover: 0 12px 40px -8px hsl(215 25% 15% / .15);
    --shadow-glow: 0 0 60px -12px hsl(152 60% 45% / .4);
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%
}

.dark {
    --background: 215 25% 8%;
    --foreground: 210 20% 98%;
    --card: 215 25% 12%;
    --card-foreground: 210 20% 98%;
    --popover: 215 25% 12%;
    --popover-foreground: 210 20% 98%;
    --primary: 210 20% 98%;
    --primary-foreground: 215 25% 8%;
    --secondary: 215 20% 18%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 20% 18%;
    --muted-foreground: 215 15% 60%;
    --accent: 152 60% 45%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 215 20% 22%;
    --input: 215 20% 22%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%
}


select{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis!important;
    white-space: nowrap;
    padding-right: 45px!important;
}

/** hide number input up and down arrow **/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none!important;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield!important;
}