/* // Default theme */

:root {
  /* AtlasUp Brand Theme - Blue Color Palette */

  /* Primary Accent - AtlasUp Blue */
  --eos-color-primary-rgb: 0, 142, 204; /* #008ECC - AtlasUp primary blue */
  --eos-color-primary-dark-rgb: 0, 114, 163; /* #0072A3 - Darker blue for hover */
  --eos-color-primary-light-rgb: 115, 194, 251; /* #73C2FB - Light blue (secondary) */
  --eos-color-primary-lighter-rgb: 230, 245, 254; /* #E6F5FE - Very light blue tint */
  --eos-color-primary-active-rgb: 0, 114, 163; /* #0072A3 - Active state */
  --eos-color-primary-orange-red-rgb: 240, 78, 35; /* #F04E23 - Keep for legacy */

  /* Background Colors - Clean Whites and Light Grays */
  --eos-color-bg-primary-rgb: 248, 249, 250; /* #F8F9FA - Main background (very light gray) */
  --eos-color-bg-secondary-rgb: 255, 255, 255; /* #FFFFFF - Pure white for cards/panels */
  --eos-color-bg-tertiary-rgb: 248, 249, 250; /* #F8F9FA - Input backgrounds */

  /* Neutral Grays - Subtle and Clean */
  --eos-color-neutral-lightest-rgb: 248, 249, 250; /* #F8F9FA - Lightest */
  --eos-color-neutral-light-rgb: 233, 236, 239; /* #E9ECEF - Light borders */
  --eos-color-neutral-medium-rgb: 206, 212, 218; /* #CED4DA - Medium gray */
  --eos-color-neutral-dark-rgb: 173, 181, 189; /* #ADB5BD - Dark gray */
  --eos-color-neutral-darker-rgb: 90, 98, 106; /* #5A626A - Darker gray (more distinct) */
  --eos-color-neutral-darkest-rgb: 73, 80, 87; /* #495057 - Darkest gray */

  /* Additional Grays (for backward compatibility) */
  --eos-color-additional-lightest-gray-rgb: 233, 236, 239; /* #E9ECEF */
  --eos-color-additional-medium-gray-rgb: 173, 181, 189; /* #ADB5BD */
  --eos-color-additional-dark-gray-rgb: 108, 117, 125; /* #6C757D */

  /* Text Colors - Clean and Readable */
  --eos-color-text-primary-rgb: 33, 37, 41; /* #212529 - Primary text (near black) */
  --eos-color-text-secondary-rgb: 108, 117, 125; /* #6C757D - Secondary text */
  --eos-color-text-disabled-rgb: 173, 181, 189; /* #ADB5BD - Disabled text */
  --eos-color-body-rgb: 33, 37, 41; /* #212529 - Body text */

  /* Header - Dark (AtlasUp Style) */
  --eos-color-header-bg-rgb: 26, 26, 26; /* #1A1A1A - Dark header background */
  --eos-color-header-text-rgb: 255, 255, 255; /* #FFFFFF - White text on dark header */

  /* Secondary Colors - ONLY Primary and Secondary Blues */
  --eos-color-secondary-navy-rgb: 73, 80, 87; /* #495057 - Neutral dark gray */
  --eos-color-secondary-blue-rgb: 0, 142, 204; /* #008ECC - Use PRIMARY blue */
  --eos-color-secondary-dark-rgb: 0, 142, 204; /* #008ECC - Use PRIMARY blue */
  --eos-color-secondary-light-blue-rgb: 115, 194, 251; /* #73C2FB - Use SECONDARY blue */
  --eos-color-secondary-beige-rgb: 251, 237, 226; /* #FBEDE2 */
  --eos-color-atlasUp: #f3c249; /* Keep legacy */

  /* Converted RGB to usable colors */
  --eos-color-primary: rgb(var(--eos-color-primary-rgb));
  --eos-color-primary-dark: rgb(var(--eos-color-primary-dark-rgb));
  --eos-color-primary-light: rgb(var(--eos-color-primary-light-rgb));
  --eos-color-primary-lighter: rgb(var(--eos-color-primary-lighter-rgb));
  --eos-color-primary-active: rgb(var(--eos-color-primary-active-rgb));
  --eos-color-primary-orange-red: rgb(var(--eos-color-primary-orange-red-rgb));

  --eos-color-bg-primary: rgb(var(--eos-color-bg-primary-rgb));
  --eos-color-bg-secondary: rgb(var(--eos-color-bg-secondary-rgb));
  --eos-color-bg-tertiary: rgb(var(--eos-color-bg-tertiary-rgb));

  --eos-color-text-primary: rgb(var(--eos-color-text-primary-rgb));
  --eos-color-text-secondary: rgb(var(--eos-color-text-secondary-rgb));
  --eos-color-text-disabled: rgb(var(--eos-color-text-disabled-rgb));

  --eos-color-header-bg: rgb(var(--eos-color-header-bg-rgb));
  --eos-color-header-text: rgb(var(--eos-color-header-text-rgb));
  --eos-color-secondary-navy: rgb(var(--eos-color-secondary-navy-rgb));
  --eos-color-secondary-blue: rgb(var(--eos-color-secondary-blue-rgb));
  --eos-color-secondary-light-blue: rgb(var(--eos-color-secondary-light-blue-rgb));
  --eos-color-secondary-beige: rgb(var(--eos-color-secondary-beige-rgb));
  --eos-color-neutral-darkest: rgb(var(--eos-color-neutral-darkest-rgb));
  --eos-color-neutral-darker: rgb(var(--eos-color-neutral-darker-rgb));
  --eos-color-neutral-dark: rgb(var(--eos-color-neutral-dark-rgb));
  --eos-color-neutral-medium: rgb(var(--eos-color-neutral-medium-rgb));
  --eos-color-neutral-light: rgb(var(--eos-color-neutral-light-rgb));
  --eos-color-neutral-lightest: rgb(var(--eos-color-neutral-lightest-rgb));
  --eos-color-secondary-dark: rgb(var(--eos-color-secondary-dark-rgb));
  --eos-color-additional-lightest-gray: rgb(var(--eos-color-additional-lightest-gray-rgb));
  --eos-color-additional-medium-gray: rgb(var(--eos-color-additional-medium-gray-rgb));
  --eos-color-additional-dark-gray: rgb(var(--eos-color-additional-dark-gray-rgb));

  /* New Colors from Sprint 24 - Consolidated to Primary/Secondary Blues */
  --eos-color-secondary-teal-rgb: 0, 142, 204;
  /* #008ECC - Teal is closer to PRIMARY blue */
  --eos-color-true-black-rgb: 0, 0, 0;
  /* #000000 */
  --eos-color-gray1-dark-rgb: 101, 101, 101;
  /* #656565 */
  --eos-color-white-rgb: 255, 255, 255;
  /* #FFFFFF */
  --eos-color-additional-gray3-medium-rgb: 175, 175, 175;
  /* #AFAFAF */
  --eos-color-additional-brown-rgb: 153, 110, 36;
  /* #996E24 */
  --eos-color-primary-dark-orange-rgb: 219, 102, 0;
  /* #DB6600 */
  --eos-color-accessible-green-on-dark-rgb: 0, 155, 114;
  /* #009B72 */
  --eos-color-dark-yellow-rgb: 224, 141, 1;
  /* #E08D01 */
  --eos-color-accessible-red-on-dark-rgb: 255, 0, 51;
  /* #FF0033 */
  --eos-color-accessible-dark-yellow-rgb: 231, 160, 41;
  /* #E7A029 */
  --eos-color-accessible-burnt-orange-rgb: 178, 83, 1;
  /* #B25301 */
  --eos-color-accessible-secondary-blue-rgb: 0, 142, 204;
  /* #008ECC - Use PRIMARY blue */
  --eos-color-accessible-med-yellow-rgb: 252, 176, 76;
  /* #FCB04C */
  --eos-color-placeholder-rgb: 104, 112, 120;
  /* #687078 */
  --eos-color-purple-rgb: 0, 142, 204;
  /* #008ECC - Use PRIMARY blue instead of purple */

  --eos-color-secondary-teal: rgb(var(--eos-color-secondary-teal-rgb));
  --eos-color-secondary-teal-light: rgb(var(--eos-color-secondary-teal-rgb), 0.62);
  --eos-color-secondary-teal-very-light: hsl(
    from var(--eos-color-secondary-teal) calc(h + 1.61) calc(s * 0.55) calc(l * 94.215 / 34)
  );
  --eos-color-true-black: rgb(var(--eos-color-true-black-rgb));
  --eos-color-gray1-dark: rgb(var(--eos-color-gray1-dark-rgb));
  --eos-color-white: rgb(var(--eos-color-white-rgb));
  --eos-color-additional-gray3-medium: rgb(var(--eos-color-additional-gray3-medium-rgb));
  --eos-color-additional-brown: rgb(var(--eos-color-additional-brown-rgb));
  --eos-color-primary-dark-orange: rgb(var(--eos-color-primary-dark-orange-rgb));
  --eos-color-accessible-green-on-dark: rgb(var(--eos-color-accessible-green-on-dark-rgb));
  --eos-color-dark-yellow: rgb(var(--eos-color-dark-yellow-rgb));
  --eos-color-accessible-red-on-dark: rgb(var(--eos-color-accessible-red-on-dark-rgb));
  --eos-color-accessible-dark-yellow: rgb(var(--eos-color-accessible-dark-yellow-rgb));
  --eos-color-accessible-burnt-orange: rgb(var(--eos-color-accessible-burnt-orange-rgb));
  --eos-color-accessible-secondary-blue: rgb(var(--eos-color-accessible-secondary-blue-rgb));
  --eos-color-accessible-med-yellow: rgb(var(--eos-color-accessible-med-yellow-rgb));
  --eos-color-placeholder: rgb(var(--eos-color-placeholder-rgb));
  --eos-color-purple: rgb(var(--eos-color-purple-rgb));

  /* End Colors */

  --eos-timer-under: var(--eos-color-accessible-green-on-dark-rgb);
  --eos-timer-warning: var(--eos-color-dark-yellow);
  --eos-timer-over: var(--eos-color-accessible-red-on-dark);
  /* Status Colors - Bootstrap Standard (Subtle and Professional) */
  --eos-color-success-rgb: 25, 135, 84; /* #198754 - Bootstrap green */
  --eos-color-success-light-rgb: 237, 247, 244; /* #EDF7F4 */
  --eos-color-danger-rgb: 220, 53, 69; /* #DC3545 - Bootstrap red */
  --eos-color-danger-light-rgb: 249, 233, 236; /* #F9E9EC */
  --eos-color-warning-rgb: 255, 193, 7; /* #FFC107 - Bootstrap warning */
  --eos-color-warning-light-rgb: 252, 242, 226; /* #FCF2E2 */
  --eos-color-info-rgb: 0, 142, 204; /* #008ECC - Use PRIMARY blue for info */

  --eos-color-warning: var(--eos-color-accessible-dark-yellow);
  --eos-color-warning-dark: var(--eos-color-accessible-burnt-orange);
  --eos-color-measurable-met: var(--eos-color-success);
  --eos-color-body: rgb(var(--eos-color-body-rgb));
  --eos-color-success: rgb(var(--eos-color-success-rgb));
  --eos-color-success-light: rgb(var(--eos-color-success-light-rgb));
  --eos-color-info: rgb(var(--eos-color-info-rgb));
  --eos-color-warning-light: rgb(var(--eos-color-warning-light-rgb));
  --eos-color-danger: rgb(var(--eos-color-danger-rgb));
  --eos-color-danger-light: rgb(var(--eos-color-danger-light-rgb));

  /* 
	 * Action color is often same as primary, but does not have to be. A cue that an element does something,
     * e.g. action buttons.
     */
  /* Action color */
  --eos-color-action-rgb: var(--eos-color-primary-rgb);
  --eos-color-action: var(--eos-color-primary);

  /* Header - Dark (AtlasUp Style) */
  --eos-header-bg: rgb(var(--eos-color-header-bg-rgb));
  --eos-header-text-color: rgb(var(--eos-color-header-text-rgb));
  --eos-header-nav-hover-bg: rgba(255, 255, 255, 0.1);
  --eos-header-avatar-bg: rgba(255, 255, 255, 0.1);
  --eos-header-avatar-text: rgb(255, 255, 255);
  --eos-header-toggler-color: rgb(255, 255, 255);

  /* Body & Footer */
  --eos-body-bg: rgb(var(--eos-color-bg-primary-rgb));
  --eos-footer-text: rgb(var(--eos-color-text-secondary-rgb));

  /* Scrollbar */
  --eos-scroll-handle-color: rgb(var(--eos-color-neutral-medium-rgb));
  --eos-scroll-handle-hover-color: rgb(var(--eos-color-neutral-dark-rgb));

  /* Left Navigation - Clean White with Blue Accents (AtlasUp Style) */
  --eos-left-nav-bg: rgb(var(--eos-color-bg-secondary-rgb));
  --eos-left-nav-border-color: rgb(var(--eos-color-neutral-light-rgb));
  --eos-left-nav-toggler-color: rgb(var(--eos-color-text-secondary-rgb));
  --eos-left-nav-item-icon-color: rgb(var(--eos-color-text-secondary-rgb));
  --eos-left-nav-item-text-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-left-nav-item-hover-icon-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-left-nav-item-hover-text-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-left-nav-item-hover-bg: rgb(248, 249, 250);
  --eos-left-nav-item-active-bg: rgb(248, 249, 250);
  --eos-left-nav-item-active-icon-color: rgb(var(--eos-color-white-rgb)); /* Blue accent */
  --eos-left-nav-item-active-text-color: rgb(var(--eos-color-text-primary-rgb));

  /* Primary Button - AtlasUp Blue */
  --eos-btn-primary-bg: rgb(var(--eos-color-primary-rgb));
  --eos-btn-primary-border-color: rgb(var(--eos-color-primary-rgb));
  --eos-btn-primary-text-color: var(--eos-color-white);
  --eos-btn-primary-hover-bg: rgb(var(--eos-color-primary-dark-rgb));
  --eos-btn-primary-hover-text-color: var(--eos-color-white);
  --eos-btn-primary-hover-border-color: rgb(var(--eos-color-primary-dark-rgb));
  --eos-btn-primary-disabled-bg: rgb(var(--eos-color-neutral-medium-rgb));
  --eos-btn-primary-disabled-border-color: rgb(var(--eos-color-neutral-medium-rgb));
  --eos-btn-primary-disabled-text-color: var(--eos-color-white);
  --eos-btn-primary-shadow: none;

  /* Secondary Button - Clean Neutral (Music UI Style) */
  --eos-btn-secondary-bg: rgb(var(--eos-color-bg-secondary-rgb));
  --eos-btn-secondary-border-color: rgb(var(--eos-color-neutral-light-rgb));
  --eos-btn-secondary-text-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-btn-secondary-hover-bg: rgb(248, 249, 250);
  --eos-btn-secondary-hover-text-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-btn-secondary-hover-border-color: rgb(var(--eos-color-neutral-medium-rgb));
  --eos-btn-secondary-disabled-bg: rgb(248, 249, 250);
  --eos-btn-secondary-disabled-border-color: rgb(var(--eos-color-neutral-light-rgb));

  /* Text Button - Minimal Styling */
  --eos-btn-text-bg: transparent;
  --eos-btn-text-border-color: transparent;
  --eos-btn-text-text-color: rgb(var(--eos-color-text-secondary-rgb));
  --eos-btn-text-hover-text-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-btn-text-disabled-color: rgb(var(--eos-color-text-disabled-rgb));

  /* Muted Button */
  --eos-btn-muted-bg: transparent;
  --eos-btn-muted-border-color: transparent;
  --eos-btn-muted-text-color: rgb(var(--eos-color-text-secondary-rgb));
  --eos-btn-muted-hover-bg: transparent;
  --eos-btn-muted-hover-text-color: rgb(var(--eos-color-primary-rgb));
  --eos-btn-muted-hover-border-color: transparent;
  --eos-btn-muted-disabled-text-color: rgb(var(--eos-color-text-disabled-rgb));
  --eos-btn-muted-disabled-border-color: transparent;

  /* Tables - Clean and Minimal */
  --eos-tbl-head-bg: rgb(var(--eos-color-bg-secondary-rgb));
  --eos-tbl-head-text-color: rgb(var(--eos-color-text-secondary-rgb));
  --eos-tbl-head-border-color: rgb(var(--eos-color-neutral-light-rgb));
  --eos-tbl-row-hover-bg: rgb(248, 249, 250);
  --eos-tbl-action-divider-color: rgb(var(--eos-color-neutral-light-rgb));

  /* Forms - Subtle Borders, Blue Focus */
  --eos-field-label-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-textbox-bg: rgb(var(--eos-color-bg-secondary-rgb));
  --eos-textbox-border-color: rgb(var(--eos-color-neutral-light-rgb));
  --eos-textbox-focus-border-color: rgb(var(--eos-color-primary-rgb));
  --eos-textbox-focus-shadow: 0 0 0 2px rgba(0, 142, 204, 0.1);
  --eos-input-filled-in-color: rgb(var(--eos-color-text-primary-rgb));

  /* Tiles & UI Elements - White with Subtle Shadows */
  --eos-tile-bg: rgb(var(--eos-color-bg-secondary-rgb));
  --eos-tile-heading-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-tile-border-color: rgb(var(--eos-color-neutral-light-rgb));
  --eos-tile-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

  /* Context Menu & Tabs - Minimal Color */
  --eos-context-menu-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-context-menu-hover-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-context-menu-hover-bg: rgb(248, 249, 250);
  --eos-tab-active-color: rgb(var(--eos-color-text-primary-rgb));
  --eos-tab-inactive-color: rgb(var(--eos-color-text-secondary-rgb));
  --eos-tab-border-color: rgb(var(--eos-color-neutral-light-rgb));

  /* Approve Button - Subtle Green */
  --eos-btn-approve-bg: rgb(var(--eos-color-success-rgb));
  --eos-btn-approve-border-color: rgb(var(--eos-color-success-rgb));
  --eos-btn-approve-text-color: var(--eos-color-white);
  --eos-btn-approve-hover-bg: rgb(20, 108, 67);
  --eos-btn-approve-hover-text-color: var(--eos-color-white);
  --eos-btn-approve-hover-border-color: rgb(20, 108, 67);

  /* Border Radius System - Subtle Rounding */
  --eos-border-radius: 0.375rem; /* 6px - Standard */
  --eos-border-radius-sm: 0.25rem; /* 4px - Small elements */
  --eos-border-radius-lg: 0.5rem; /* 8px - Large elements */

  /* Borders - Very Subtle */
  --eos-color-border: rgb(var(--eos-color-neutral-light-rgb));
  --eos-color-border-light: rgb(248, 249, 250);

  /* Shadow System - Minimal */
  --eos-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --eos-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.06);
  --eos-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.08);
  --eos-shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* Cards & Panels - Clean White */
  --eos-card-bg: rgb(var(--eos-color-bg-secondary-rgb));
  --eos-card-border-color: rgb(var(--eos-color-neutral-light-rgb));
  --eos-card-shadow: var(--eos-shadow-sm);
  --eos-card-hover-shadow: var(--eos-shadow-md);

  /* Modals - Clean */
  --eos-modal-bg: rgb(var(--eos-color-bg-secondary-rgb));
  --eos-modal-header-bg: rgb(var(--eos-color-bg-secondary-rgb));
  --eos-modal-border-color: rgb(var(--eos-color-neutral-light-rgb));
  --eos-modal-shadow: var(--eos-shadow-lg);

  /* z-index values */
  --eos-popup-z-index: 2147483001;
  --eos-popup-panel-z-index: 2147483002;
  --eos-prompt-modal-z-index: 2147483003;
  --eos-confirm-modal-z-index: 2147483004;

  --eos-html-field-z-index: 2147483003;
  --eos-toast-z-index: 2147483003;
  --eos-tooltip-z-index: 10000000001;

  /* Gradients */
  --eos-gradient-blue-to-dark: linear-gradient(
    270deg,
    var(--eos-color-accessible-secondary-blue) 23.86%,
    var(--eos-color-primary-dark) 100%
  );
}