:root {
    /* Light Mode (default) */
    --lo-bg-color:              #ffffff;
    --lo-bg-color-darker:       #f2f2f2;
    --lo-bg-input-color: #f8f8f8;
    --lo-bg-section-color: #dddddd;
    --lo-text-color:            #505050;
    --lo-text-color-reversed: #f6f6f6;
    --lo-border-color:          #dddddd;
    --lo-primary-color: #168ccf;

    /* Imported custom variables */
    --lo-bg-gridselect-color:   #B1DFF570;
    --lo-button-focus-color:    #32aae1;
    --lo-alert-red:             #e64b14;
    --lo-alert-yellow:          #fab432;
    --lo-alert-green:           #96c319;
    --lo-alert-blue:            #32aae1;
    --lo-text-color-default:    #3c3c3c;

    --lo-border-color-light:    #e6e6e6;
    --lo-border-color-dark:     #b8b8b8;

    /* Header typography */
    --lo-header-font-family:    'Open Sans', Arial, sans-serif;
    --lo-header-font-weight:    800;
    --lo-header-font-style:     italic;
    --lo-header-transform:      uppercase;
    --lo-header-size-h6:        0.9rem;

    /* Spacing */
    --lo-spacing-sm: 5px;
    --lo-spacing-md: 8px;
    
    /*Shadow*/
    --lo-shadow-inset: inset 0 3px 4px rgba(0,0,0,0.05),
    inset 0 -3px 4px rgba(255,255,255,0.1);
    
    --lo-border-radius: 8px;
}

/* Dark Mode */
[data-theme="dark"] {
    --lo-bg-color: #3a3a3a;
    --lo-bg-color-darker: #505050;
    --lo-bg-input-color: #555555;
    --lo-text-color: #f4f4f4;
    --lo-border-color: #494949;
    --lo-primary-color: #1274ac;
}

/* Gray Mode */
[data-theme="gray"] {
    --lo-bg-color:      #f0f0f0;
    --lo-text-color:    #333333;
    --lo-border-color:  #bbbbbb;
    --lo-primary-color: #888888;
}

/* Theme Utilities */
.lo-bg-primary { background-color: var(--lo-primary-color) !important; }
.lo-bg         { background-color: var(--lo-bg-color) !important; }
.lo-text       { color: var(--lo-text-color) !important; }
.lo-border     { border: solid 1px var(--lo-border-color) !important; }

/* Imported variable utilities */
.lo-bg-gridselect { background-color: var(--lo-bg-gridselect-color) !important; }
.lo-button-focus  { outline-color: var(--lo-button-focus-color) !important; }
.lo-alert-red     { color: var(--lo-alert-red) !important; }
.lo-alert-yellow  { color: var(--lo-alert-yellow) !important; }
.lo-alert-green   { color: var(--lo-alert-green) !important; }
.lo-alert-blue    { color: var(--lo-alert-blue) !important; }
.lo-text-default  { color: var(--lo-text-color-default) !important; }

.lo-border-light  { border-color: var(--lo-border-color-light) !important; }
.lo-border-dark   { border-color: var(--lo-border-color-dark) !important; }

/* Header classes */
.lo-h2, .lo-h3, .lo-h4, .lo-h5, .lo-h6 {
    color: var(--lo-text-color-default);
    font-family: var(--lo-header-font-family);
    font-weight: var(--lo-header-font-weight);
    font-style: var(--lo-header-font-style);
    text-transform: var(--lo-header-transform);
    margin: 0;
    padding-left: var(--lo-spacing-sm);
}
.lo-h6 {
    font-size: var(--lo-header-size-h6);
}
.lo-h4 {
    font-size: 1.2rem;
}

/* Layout & Flex */
.lo-d-flex { display: flex !important; }
.lo-flex-row { flex-direction: row !important; }
.lo-flex-col { flex-direction: column !important; }
.lo-flex-1 { flex: 1 !important; }
.lo-items-end { align-items: flex-end !important; }
.lo-items-center { align-items: center !important; }
.lo-justify-center { justify-content: center !important; }
.lo-d-grid   { display: grid !important; }
.lo-gap-sm   { gap: var(--lo-spacing-sm) !important; }
.lo-flex-none    { flex: 0 0 auto !important; }
.lo-justify-between { justify-content: space-between !important; }


/* Spacing Utilities */
.lo-m-0     { margin: 0 !important; }
.lo-mb-1    { margin-bottom: var(--lo-spacing-sm) !important; }
.lo-mb-md   { margin-bottom: var(--lo-spacing-md) !important; }
.lo-mb-lg   { margin-bottom: var(--lo-spacing-md) !important; }
.lo-ml-sm   { margin-left: var(--lo-spacing-sm) !important; }
.lo-ml-md   { margin-left: var(--lo-spacing-md) !important; }
.lo-mr-sm   { margin-right: var(--lo-spacing-sm) !important; }
.lo-mr-md   { margin-right: var(--lo-spacing-md) !important; }
.lo-mt-sm   { margin-top: var(--lo-spacing-sm) !important; }
.lo-mt-md   { margin-top: var(--lo-spacing-md) !important; }
.lo-mt-lg   { margin-top: var(--lo-spacing-md) !important; }
.lo-ml-auto { margin-left: auto !important; }

/* Padding Utilities */
.lo-p-0        { padding: 0 !important; }
.lo-pr-sm      { padding-right: var(--lo-spacing-sm) !important; }
.lo-pl-sm      { padding-left:  var(--lo-spacing-sm) !important; }
.lo-pr-md      { padding-right: var(--lo-spacing-md) !important; }
.lo-pl-md      { padding-left:  var(--lo-spacing-md) !important; }
.lo-p-sm       { padding: var(--lo-spacing-sm) !important; }
.lo-pt-sm       { padding-top: var(--lo-spacing-sm) !important; }

/* Sizing */
.lo-max-w-full { max-width: 100% !important; }
.lo-w-fit       { width: fit-content !important; }
.lo-w-full      { width: 100% !important; }
.lo-min-h-30    { min-height: 30px !important; }
.lo-h-full      { height: 100% !important; }

/* Typography */
.lo-text-small          { font-size: 0.875rem !important; }
.lo-font-bold           { font-weight: bold !important; }
.lo-font-mono           { font-family: 'Courier New', Courier, monospace !important; }
.lo-nowrap              { white-space: nowrap !important; }
.lo-text-truncate       { white-space: nowrap !important; text-overflow: ellipsis !important; }
.lo-text-left           { text-align: left   !important; }
.lo-text-center         { text-align: center !important; }


/* Border Radius Utilities */
.lo-rounded-sm { border-radius: var(--lo-border-radius) !important; }

/* Overflow Utilities */
.lo-overflow-x-hidden { overflow-x: hidden !important; }
.lo-overflow-hidden   { overflow: hidden !important; }