:root, ::backdrop {
    --hylo-unit: 4;
    /* Spacing */
    --dh-spacing-0: 0px;
    --dh-spacing-px: 1px;
    --dh-spacing-0\.5: 0.125rem;  /* 2px */
    --dh-spacing-1: 0.25rem;    /* 4px */
    --dh-spacing-1\.5: 0.375rem; /* 6px */
    --dh-spacing-2: 0.5rem;     /* 8px */
    --dh-spacing-2\.5: 0.625rem; /* 10px */
    --dh-spacing-3: 0.75rem;    /* 12px */
    --dh-spacing-3\.5: 0.875rem; /* 14px */
    --dh-spacing-4: 1rem;       /* 16px */
    --dh-spacing-5: 1.25rem;    /* 20px */
    --dh-spacing-6: 1.5rem;     /* 24px */
    --dh-spacing-7: 1.75rem;    /* 28px */
    --dh-spacing-8: 2rem;       /* 32px */
    --dh-spacing-9: 2.25rem;    /* 36px */
    --dh-spacing-10: 2.5rem;    /* 40px */
    --dh-spacing-11: 2.75rem;   /* 44px */
    --dh-spacing-12: 3rem;      /* 48px */
    --dh-spacing-14: 3.5rem;    /* 56px */
    --dh-spacing-16: 4rem;      /* 64px */
    --dh-spacing-20: 5rem;      /* 80px */
    --dh-spacing-24: 6rem;      /* 96px */
    --dh-spacing-28: 7rem;      /* 112px */
    --dh-spacing-32: 8rem;      /* 128px */
    --dh-spacing-36: 9rem;      /* 144px */
    --dh-spacing-40: 10rem;     /* 160px */
    --dh-spacing-44: 11rem;     /* 176px */
    --dh-spacing-48: 12rem;     /* 192px */
    --dh-spacing-52: 13rem;     /* 208px */
    --dh-spacing-56: 14rem;     /* 224px */
    --dh-spacing-60: 15rem;     /* 240px */
    --dh-spacing-64: 16rem;     /* 256px */
    --dh-spacing-72: 18rem;     /* 288px */
    --dh-spacing-80: 20rem;     /* 320px */
    --dh-spacing-96: 24rem;     /* 384px */
    
    /* Font weight */
    --dh-font-weight-thin: 100;
    --dh-font-weight-extralight: 200;
    --dh-font-weight-light: 300;
    --dh-font-weight-normal: 400;
    --dh-font-weight-medium: 500;
    --dh-font-weight-semibold: 600;
    --dh-font-weight-bold: 700;
    --dh-font-weight-extrabold: 800;
    --dh-font-weight-black: 900;
  
    /* Font size */
    --dh-font-size-xs: 0.75rem;      /* 12px */
    --dh-font-size-sm: 0.875rem;     /* 14px */
    --dh-font-size-base: 1rem;       /* 16px */
    --dh-font-size-lg: 1.125rem;     /* 18px */
    --dh-font-size-xl: 1.25rem;      /* 20px */
    --dh-font-size-2xl: 1.5rem;      /* 24px */
    --dh-font-size-3xl: 1.875rem;    /* 30px */
    --dh-font-size-4xl: 2.25rem;     /* 36px */
    --dh-font-size-5xl: 3rem;        /* 48px */
    --dh-font-size-6xl: 4rem;        /* 64px */
    --dh-font-size-7xl: 5rem;        /* 80px */
    --dh-font-size-8xl: 6rem;        /* 96px */
    --dh-font-size-9xl: 8rem;        /* 128px */

    /* Border width */
    --dh-border-width-0: 0px;
    --dh-border: 1px;
    --dh-border-width-2: 2px;
    --dh-border-width-4: 4px;
    --dh-border-width-8: 8px;

    /* Border radius */
    --dh-rounded-none: 0px;
    --dh-rounded-sm: 0.125rem; /* 2px */
    --dh-rounded: 0.25rem; /* 4px */
    --dh-rounded-md: 0.375rem; /* 6px */
    --dh-rounded-lg: 0.5rem; /* 8px */
    --dh-rounded-xl: 0.75rem; /* 12px */
    --dh-rounded-2xl: 1rem; /* 16px */
    --dh-rounded-3xl: 1.5rem; /* 24px */
    --dh-rounded-full: 9999px;

    /* Breakpoints */
    --dh-breakpoint-xs: 320px;  /* Extra small devices (portrait phones) */
    --dh-breakpoint-sm: 640px;  /* Small devices (landscape phones) */
    --dh-breakpoint-md: 768px;  /* Medium devices (tablets) */
    --dh-breakpoint-lg: 1024px; /* Large devices (desktops) */
    --dh-breakpoint-xl: 1280px; /* Extra large devices (large desktops) */
    --dh-breakpoint-2xl: 1536px;/* 2XL - for very large screens */

    /* Box shadow */
    --dh-shadow-sm: 1px 2px 0 rgb(0 0 0 / 0.05);
    --dh-shadow-none: 0 0 #0000;

    /* Colors */
    --dh-color-white: rgb(255 255 255);
    --dh-color-gray-100: rgb(249 250 251);
    --dh-color-gray-200: rgb(243 244 246);
    --dh-color-gray-300: rgb(228 228 231);
    --dh-color-gray-400: rgb(209 213 219);
    --dh-color-gray-500: rgb(156 163 175);
    --dh-color-gray-600: rgb(107 114 128);
    --dh-color-gray-700: rgb(55 65 81);
    --dh-color-gray-800: rgb(31 41 55);
    --dh-color-gray-900: rgb(17 24 39);
    --dh-color-black: rgb(0, 0, 0);
    --dh-color-blue-50: rgb(224 242 254);
    --dh-color-blue-100: rgb(125 211 252);
    --dh-color-blue-400: rgb(14 165 233);
    --dh-color-blue-500: rgb(2 132 199);
    --dh-color-blue-600: rgb(3 105 161);
    --dh-color-blue-700: rgb(7 89 133);
    --dh-color-green-400: rgb(159 199 174);
    --dh-color-green-500: rgb(34 197 94);
    --dh-color-green-600: rgb(35 108 61);
    --dh-color-red-400: rgb(252 165 165);
    --dh-color-red-500: rgb(239 68 68);
    --dh-color-red-600: rgb(153, 28, 28);
}