:root {
    /* Padding */
    --dt-padding-0: 0;
    --dt-padding-1: 0.25rem;
    --dt-padding-2: 0.5rem;
    --dt-padding-3: 0.75rem;
    --dt-padding-4: 1rem;
    --dt-padding-5: 1.25rem;
    --dt-padding-6: 1.5rem;
    --dt-padding-8: 2rem;
    --dt-padding-10: 2.5rem;
    --dt-padding-12: 3rem;
    --dt-padding-16: 4rem;
    --dt-padding-20: 5rem;

    --dt-padding-x-0: 0;
    --dt-padding-x-1: 0.25rem;
    --dt-padding-x-2: 0.5rem;
    --dt-padding-x-3: 0.75rem;
    --dt-padding-x-4: 1rem;
    --dt-padding-x-5: 1.25rem;
    --dt-padding-x-6: 1.5rem;
    --dt-padding-x-8: 2rem;
    --dt-padding-x-10: 2.5rem;
    --dt-padding-x-12: 3rem;
    --dt-padding-x-16: 4rem;
    --dt-padding-x-20: 5rem;

    --dt-padding-y-0: 0;
    --dt-padding-y-1: 0.25rem;
    --dt-padding-y-2: 0.5rem;
    --dt-padding-y-3: 0.75rem;
    --dt-padding-y-4: 1rem;
    --dt-padding-y-5: 1.25rem;
    --dt-padding-y-6: 1.5rem;
    --dt-padding-y-8: 2rem;
    --dt-padding-y-10: 2.5rem;
    --dt-padding-y-12: 3rem;
    --dt-padding-y-16: 4rem;
    --dt-padding-y-20: 5rem;

    /* Margin */
    --dt-margin-0: 0;
    --dt-margin-1: 0.25rem;
    --dt-margin-2: 0.5rem;
    --dt-margin-3: 0.75rem;
    --dt-margin-4: 1rem;
    --dt-margin-5: 1.25rem;
    --dt-margin-6: 1.5rem;
    --dt-margin-8: 2rem;
    --dt-margin-10: 2.5rem;
    --dt-margin-12: 3rem;
    --dt-margin-16: 4rem;
    --dt-margin-20: 5rem;

    --dt-margin-x-0: 0;
    --dt-margin-x-1: 0.25rem;
    --dt-margin-x-2: 0.5rem;
    --dt-margin-x-3: 0.75rem;
    --dt-margin-x-4: 1rem;
    --dt-margin-x-5: 1.25rem;
    --dt-margin-x-6: 1.5rem;
    --dt-margin-x-8: 2rem;
    --dt-margin-x-10: 2.5rem;
    --dt-margin-x-12: 3rem;
    --dt-margin-x-16: 4rem;
    --dt-margin-x-20: 5rem;

    --dt-margin-y-0: 0;
    --dt-margin-y-1: 0.25rem;
    --dt-margin-y-2: 0.5rem;
    --dt-margin-y-3: 0.75rem;
    --dt-margin-y-4: 1rem;
    --dt-margin-y-5: 1.25rem;
    --dt-margin-y-6: 1.5rem;
    --dt-margin-y-8: 2rem;
    --dt-margin-y-10: 2.5rem;
    --dt-margin-y-12: 3rem;
    --dt-margin-y-16: 4rem;
    --dt-margin-y-20: 5rem;

    /* Font Sizes */
    --dt-font-size-xs: 0.75rem;
    --dt-font-size-sm: 0.875rem;
    --dt-font-size-base: 1rem;
    --dt-font-size-lg: 1.125rem;
    --dt-font-size-xl: 1.25rem;
    --dt-font-size-2xl: 1.5rem;
    --dt-font-size-3xl: 1.875rem;
    --dt-font-size-4xl: 2.25rem;
    --dt-font-size-5xl: 3rem;
    --dt-font-size-6xl: 4rem;

    /* Font Weights */
    --dt-font-weight-thin: 100;
    --dt-font-weight-extralight: 200;
    --dt-font-weight-light: 300;
    --dt-font-weight-normal: 400;
    --dt-font-weight-medium: 500;
    --dt-font-weight-semibold: 600;
    --dt-font-weight-bold: 700;
    --dt-font-weight-extrabold: 800;
    --dt-font-weight-black: 900;

    /* Box Shadows */
    --dt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --dt-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dt-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --dt-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
    --dt-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --dt-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --dt-shadow-none: none;

    /* Border Radius */
    --dt-border-radius-none: 0;
    --dt-border-radius-sm: 0.125rem;
    --dt-border-radius: 0.25rem;
    --dt-border-radius-md: 0.375rem;
    --dt-border-radius-lg: 0.5rem;
    --dt-border-radius-xl: 0.75rem;
    --dt-border-radius-2xl: 1rem;
    --dt-border-radius-full: 9999px;

    /* Border Witdh */
    --dt-border-width: 1px;
    --dt-border-width-2: 2px;
    --dt-border-width-4: 4px;
    --dt-border-width-8: 8px;

    --dt-border-color: #ccc;

    /* Grid container */
    --dt-grid-gap: 15px;
    --dt-flex-wrap: wrap;

    /* Column widths */
    --dt-col-width-1: 8.333%;
    --dt-col-width-2: 16.667%;
    --dt-col-width-3: 25%;
    --dt-col-width-4: 33.333%;
    --dt-col-width-5: 41.667%;
    --dt-col-width-6: 50%;
    --dt-col-width-7: 58.333%;
    --dt-col-width-8: 66.667%;
    --dt-col-width-9: 75%;
    --dt-col-width-10: 83.333%;
    --dt-col-width-11: 91.667%;
    --dt-col-width-12: 100%;

    /* Breakpoints */
    --dt-xs: 0;
    --dt-sm: 576px;
    --dt-md: 768px;
    --dt-lg: 992px;
    --dt-xl: 1200px;
    --dt-xxl: 1400px;

    /* Basic colors */
    --dt-white: #ffffff;
    --dt-black: #000000;
    --dt-gray-100: #f8f9fa;
    --dt-gray-200: #e9ecef;
    --dt-gray-300: #dee2e6;
    --dt-gray-400: #ced4da;
    --dt-gray-500: #adb5bd;
    --dt-gray-600: #6c757d;
    --dt-gray-700: #495057;
    --dt-gray-800: #343a40;
    --dt-gray-900: #212529;
    --dt-transparent: transparent;


    /* Primary Colors */
    --dt-primary: #007bff; /* Base primary color */
    --dt-primary-light: #66b3ff; /* Light variant */
    --dt-primary-dark: #0056b3; /* Dark variant */
    --dt-primary-contrast: #ffffff; /* Text color on primary */

    /* Secondary Colors */
    --dt-secondary: #03dac6; /* Base secondary color */
    --dt-secondary-light: #66fff9; /* Light variant */
    --dt-secondary-dark: #00a896; /* Dark variant */
    --dt-secondary-contrast: #000000; /* Text color on secondary */

    /* Background and Surface */
    --dt-background: #ffffff; /* Fondo para superficies de la app */
    --dt-background-dark: #282a36; /* Fondo en modo oscuro */
    --dt-background-dark-hover: #343846; /* Fondo hover en modo oscuro */
    --dt-surface: #f5f5f5; /* Fondo de superficie */
    --dt-surface-dark: #232323; /* Superficie en modo oscuro */
    --dt-on-background: #000000; /* Texto sobre fondo */
    --dt-on-background-dark: #e3e3e3; /* Texto sobre fondo oscuro */
    --dt-on-surface: #000000; /* Texto sobre superficie */
    --dt-on-surface-dark: #e3e3e3; /* Texto sobre superficie oscura */

    /* Text Colors */
    --dt-text-primary: #000000; /* Primary text */
    --dt-text-primary-dark: #e3e3e3;
    --dt-text-secondary: #5f6368; /* Secondary text */
    --dt-text-disabled: #9e9e9e; /* Disabled text */
    --dt-text-hint: #757575; /* Hint text */

    /* Status Colors */
    --dt-success: #4caf50; /* Success state */
    --dt-success-light: #81c784; /* Light success */
    --dt-success-dark: #388e3c; /* Dark success */
    --dt-success-contrast: #ffffff; /* Text on success */

    --dt-warning: #ff9800; /* Warning state */
    --dt-warning-light: #ffc947; /* Light warning */
    --dt-warning-dark: #c66900; /* Dark warning */
    --dt-warning-contrast: #000000; /* Text on warning */

    --dt-danger: #f44336; /* Danger state */
    --dt-danger-light: #e57373; /* Light danger */
    --dt-danger-dark: #d32f2f; /* Dark danger */
    --dt-danger-contrast: #ffffff; /* Text on danger */

    --dt-info: #2196f3; /* Info state */
    --dt-info-light: #64b5f6; /* Light info */
    --dt-info-dark: #1976d2; /* Dark info */
    --dt-info-contrast: #ffffff; /* Text on info */

    /* Neutral Colors */
    --dt-neutral: #7a7a7a; /* Neutral color */
    --dt-neutral-light: #bdbdbd; /* Light neutral */
    --dt-neutral-dark: #424242; /* Dark neutral */

    /* Accent Colors */
    --dt-accent: #ff9800; /* Accent color */
    --dt-accent-light: #ffc947; /* Light accent */
    --dt-accent-dark: #c66900; /* Dark accent */

    /* Divider */
    --dt-divider: #e0e0e0; /* Divider color */
}