:root {
   
    --base-color-bright: #fefefe;
    --base-color-bright-tr: #fefefecc;
    --base-color-dark: #101010;
    --base-color-darkgrey: #222222;
    --base-color-lightgrey: #9ba1a6;
    --base-color-honey: #e9c46a;
    --base-color-red: #f31717;
    --base-color-darkbluegrey: #202e3d;
    --base-color-lightbluegrey: #4d6f94;
    --base-color-brightbluegrey: #73a4d8;

    --color-main-bkg: var(--base-color-dark);
    --color-panel-bkg: var(--base-color-darkbluegrey);
    --color-panel-stroke: var(--base-color-bright-tr);
    --color-panel-invbk: var(--base-color-bright);
    --color-panel-icon: var(--base-color-bright);
    --color-panel-title-main: var(--base-color-bright);
    --color-panel-title-sub: var(--base-color-honey);
    --color-panel-guide-text: var(--base-color-bright);
    --color-panel-btn-bkg: var(--base-color-lightbluegrey);
    --color-panel-btn-text: var(--base-color-bright-tr);
    --color-panel-txtinput-bkg:  var(--base-color-bright);
    --color-panek-txtinput-text:  var(--base-color-dark);
    --color-panel-guide-link-text: var(--base-color-honey);
    --color-panel-err-msg: var(--base-color-red);


    --header-footer-bg: #333;
    --main-text-color: white;
    --sidebar-bg: #f4f4f4;
    --main-bg: #fff;
    --chat-bg: #f9f9f9;
    --input-border-top: #ddd;
    --input-border: #ccc;
      
    
}


.theme-light {
   
    --base-color-bright: #fefefe;
    --base-color-dark: #101010;
    --base-color-darkgrey: #222222;
    --base-color-lightgrey: #d5d6d7;
    --base-color-honey: #e9c46a;
    --base-color-darkbluegrey: #202e3d;
    --base-color-lightbluegrey: #4d6f94;

    --color-main-bkg: var(--base-color-bright); /* Light background */
    --color-panel-bkg: var(--base-color-lightgrey); /* Light grey for panels */
    --color-panel-stroke: var(--base-color-darkgrey); /* Dark grey for panel borders */
    --color-panel-icon: var(--base-color-dark); /* Dark icons for contrast */
    --color-panel-title-main: var(--base-color-dark); /* Dark title text */
    --color-panel-title-sub: var(--base-color-honey); /* Accent color for subtitles */
    --color-panel-guide-text: var(--base-color-darkbluegrey); /* Guide text in blue-grey */
    --color-panel-btn-bkg: var(--base-color-lightbluegrey); /* Honey-colored buttons */
    --color-panel-btn-text: var(--base-color-bright); /* Bright text on buttons */
    --color-panel-txtinput-bkg: var(--base-color-lightgrey); /* Light grey for input background */
    --color-panek-txtinput-text: var(--base-color-dark); /* Dark input text */
    --color-panel-guide-link-text: var(--base-color-darkbluegrey); /* Blue-grey for links */
    
}

.theme-pink {
     /* Base colors for the pink theme */
  --base-color-bright: #8c4a7b; /* White */
  --base-color-dark: #1a1a1a; /* Deep Black */
  --base-color-lightpink: #ffc1cc; /* Light Pink */
  --base-color-pink: #ff6f91; /* Vibrant Pink */
  --base-color-darkpink: #f084aa; /* Dark Pink */
  --base-color-grey: #dcdcdc; /* Neutral Light Grey */
  --base-color-darkgrey: #404040; /* Neutral Dark Grey */
  --base-color-accent: #ffe4e1; /* Pinkish White */

  --color-main-bkg: var(--base-color-bright); /* Light background */
  --color-panel-bkg: var(--base-color-accent); /* Pinkish white panel background */
  --color-panel-stroke: var(--base-color-grey); /* Neutral light grey for borders */
  --color-panel-icon: var(--base-color-pink); /* Vibrant pink for icons */
  --color-panel-title-main: var(--base-color-darkpink); /* Dark pink for main titles */
  --color-panel-title-sub: var(--base-color-pink); /* Vibrant pink for subtitles */
  --color-panel-guide-text: var(--base-color-dark); /* Dark text for guides */
  --color-panel-btn-bkg: var(--base-color-pink); /* Vibrant pink button background */
  --color-panel-btn-text: var(--base-color-bright); /* White text on pink buttons */
  --color-panel-txtinput-bkg: var(--base-color-lightpink); /* Light pink for input background */
  --color-panek-txtinput-text: var(--base-color-dark); /* Dark text for input fields */
  --color-panel-guide-link-text: var(--base-color-darkpink); /* Dark pink for links */
  
}