:root {
    /* ===========================
       Colors
    =========================== */
    
    /* Primary Colors */
    --color-primary: #b83280; /* Pink-600 */
    --color-primary-hover: #97266d; /* Pink-700 */
    --color-secondary: #4a90e2; /* Example Secondary Color */
    --color-secondary-hover: #357ab8; /* Darker Secondary Color */
    --color-accent: #f5a623; /* Accent Color */
    --color-danger: #e74c3c; /* Red for danger states */
    --color-warning: #f39c12; /* Orange for warnings */
    --color-success: #2ecc71; /* Green for success states */
    --color-info: #3498db; /* Blue for informational messages */

    /* Background Colors */
    --background-color-light: #f9f9f9; /* Light background */
    --background-color-dark: #2c3e50; /* Dark background */
    --background-color-off-light: #ecf0f1; /* Off-light background */
    --background-color-admin: #bdc3c7; /* Admin section background */
    --background-color-user: #ffffff; /* User section background */
    --background-color-primary-light: #f3d1e8; /* Light primary background */

    /* Button Backgrounds */
    --button-background-dark: #34495e; /* Dark button background */
    --button-background-light: #ecf0f1; /* Light button background */
    --button-background-white: #ffffff; /* White button background */

    /* Text Colors */
    --text-color-dark: #2c3e50; /* Dark text */
    --text-color-light: #666666; /* Light text */
    --text-color: #333333; /* Default text color */
    --white: #ffffff; /* White color */

    /* Button Text Colors */
    --button-text-color-dark: #ffffff; /* White text on dark buttons */
    --button-text-color-light: #2c3e50; /* Dark text on light buttons */

    /* Destructive Colors */
    --destructive: #e74c3c; /* Red for destructive actions */
    --destructive-foreground: #ffffff; /* White text on destructive backgrounds */

    /* ===========================
       Font Sizes
    =========================== */
    
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-md: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-6xl: 3.75rem; /* 60px */
    --font-size-7xl: 4.5rem; /* 72px */
    --font-size-8xl: 6rem; /* 96px */
    --font-size-9xl: 8rem; /* 128px */

    /* ===========================
       Font Weights
    =========================== */
    
    --font-weight-hairline: 100; /* Very light */
    --font-weight-thin: 200; /* Thin */
    --font-weight-light: 300; /* Light */
    --font-weight-normal: 400; /* Normal / Regular */
    --font-weight-medium: 500; /* Medium */
    --font-weight-semibold: 600; /* Semibold */
    --font-weight-bold: 700; /* Bold */
    --font-weight-extrabold: 800; /* Extrabold */
    --font-weight-black: 900; /* Black */

    /* ===========================
       Line Heights
    =========================== */
    
    --line-height-normal: normal;
    --line-height-none: 1;
    --line-height-shorter: 1.25;
    --line-height-short: 1.375;
    --line-height-base: 1.5;
    --line-height-tall: 1.625;
    --line-height-taller: 2;
    --line-height-3: 0.75rem; /* 12px */
    --line-height-4: 1rem; /* 16px */
    --line-height-5: 1.25rem; /* 20px */
    --line-height-6: 1.5rem; /* 24px */
    --line-height-7: 1.75rem; /* 28px */
    --line-height-8: 2rem; /* 32px */
    --line-height-9: 2.25rem; /* 36px */
    --line-height-10: 2.5rem; /* 40px */

    /* ===========================
       Letter Spacings
    =========================== */
    
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;

    /* ===========================
       Border Widths
    =========================== */
    
    --border-width-none: 0px; /* No border */
    --border-width-thin: 1px; /* Thin border */
    --border-width-medium: 2px; /* Medium border */
    --border-width-thick: 4px; /* Thick border */
    --border-width-extra-thick: 8px; /* Extra thick border */

    /* ===========================
       Border Radii
    =========================== */
    
    --border-radius-none: 0px; /* No rounding */
    --border-radius-sm: 2px; /* Small radius */
    --border-radius-base: 4px; /* Base radius */
    --border-radius-md: 6px; /* Medium radius */
    --border-radius-lg: 8px; /* Large radius */
    --border-radius-xl: 12px; /* Extra large radius */
    --border-radius-2xl: 16px; /* Double extra large radius */
    --border-radius-3xl: 24px; /* Triple extra large radius */
    --border-radius-full: 9999px; /* Fully rounded, for circular elements */
    --border-radius-standard: 6px; /* Standard radius, often used for buttons or input fields */

    /* ===========================
       Border Colors
    =========================== */
    
    --border: #bdc3c7; /* Default border color */
    --border-color: #bdc3c7; /* Same as --border */
    --border-color-dark: #7f8c8d; /* Darker border color */
    --border-light: #ecf0f1; /* Light border color */
    --border-standard: #bdc3c7; /* Standard border color */
    --border-primary: var(--color-primary); /* Primary border color */
    --border-secondary: var(--color-secondary); /* Secondary border color */
    --border-input-field: #95a5a6; /* Input field border color */
    --border-hover: var(--color-primary-hover); /* Border color on hover */
    --border-focus: var(--color-secondary); /* Border color on focus */

    /* ===========================
       Shadows
    =========================== */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --box-shadow: var(--shadow-md); /* Alias for box-shadow */

    /* ===========================
       Transitions
    =========================== */
    
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;

    /* ===========================
       Breakpoints
    =========================== */
    
    --breakpoint-xs: 0px; /* Phones (portrait) */
    --breakpoint-sm: 520px; /* Phones (landscape) */
    --breakpoint-md: 768px; /* Tablets (portrait) */
    --breakpoint-lg: 1024px; /* Tablets (landscape) */
    --breakpoint-xl: 1280px; /* Laptops */
    --breakpoint-xxl: 1640px; /* Desktops */

    /* ===========================
       Sizing
    =========================== */
    
    --sizes-max: max-content;
    --sizes-min: min-content;
    --sizes-full: 100%;
    --sizes-xs: 320px; /* Extra small size */
    --sizes-sm: 384px; /* Small size */
    --sizes-md: 448px; /* Medium size */
    --sizes-lg: 512px; /* Large size */
    --sizes-xl: 576px; /* Extra large size */
    --sizes-2xl: 672px; /* Double extra large size */
    --sizes-3xl: 768px; /* Triple extra large size */
    --sizes-4xl: 896px; /* Quadruple extra large size */
    --sizes-5xl: 1024px; /* 5x large size */
    --sizes-6xl: 1152px; /* 6x large size */
    --sizes-7xl: 1280px; /* 7x large size */
    --sizes-8xl: 1440px; /* 8x large size */


    /* ===========================
       Spacing
    =========================== */
    --spacing-none: 0rem;        /* 0px */
    --spacing-min: 0.1rem;       /* 4px */
    --spacing-xss: 0.25rem;      /* 4px */
    --spacing-xs: 0.5rem;        /* 8px */
    --spacing-sm: 0.75rem;       /* 12px */
    --spacing-md: 1rem;          /* 16px */
    --spacing-lg: 1.5rem;        /* 24px */
    --spacing-xl: 2rem;          /* 32px */
    --spacing-2xl: 3rem;         /* 48px */
    --spacing-3xl: 4rem;         /* 64px */
    --spacing-4xl: 5rem;         /* 80px */
    /* ===========================
       shadow
    =========================== */
    --shadow-sm: : 0px 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0px 3px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0px 10px 20px rgba(0, 0, 0, 0.2);
}