/* CSS Variables for Hornstown Game */
/* Step 1.1.1-1.1.4: Basic color variables and link colors */

:root {
  /* === BASIC COLORS === */
  /* Primary Colors */
  --primary-color: #954e71;
  --primary-hover: #f8b8b7;
  
  /* Background Colors */
  --background-main: url(Img/initbg59.jpg) no-repeat #f1e0d7;
  --background-main-color: #f1e0d7;
  --background-light: #eee;
  --background-dark: #000;
  --background-content: #e7e1d2;
  --background-card: #f5eedc;
  --background-sidebar: #161511;
  --background-button: #312426;
  --background-button-hover: #f8b8b7;
  --background-log: rgba(0,0,0,0.8);
  --background-chat: rgba(0,0,0,0.8);
  
  /* Text Colors */
  --text-primary: #595959;
  --text-light: #444;
  --text-dark: #aaa;
  --text-white: #fff;
  --text-sidebar: #CCC;
  
  /* Border Colors */
  --border-primary: #cfc9b7;
  --border-dark: #28251f;
  --border-card: #fcf5ef;
  
  /* Shadow Colors */
  --shadow-color: #333;
  --shadow-dark: #24221b;
  --shadow-light: #000;
  
  /* === BASIC TYPOGRAPHY === */
  /* Font Families */
  --font-family-primary: "Nunito", "Open Sans", sans-serif;
  --font-family-secondary: 'Lexend', sans-serif;
  
  /* Font Sizes */
  --font-size-base: 1.3em;
  --font-size-large: x-large;
  --font-size-small: 0.8vw;
  
  /* Font Weights */
  --font-weight-normal: normal;
  --font-weight-bold: bold;
  --font-weight-light: 300;
  --font-weight-heavy: 700;
  
  /* Line Heights */
  --line-height-base: 1.33;
  
  /* Letter Spacing */
  --letter-spacing-wide: 3px;
  
  /* Text Transform */
  --text-transform: none;
  
  /* Text Container */
  --background-text-container: transparent;
  --border-text-container: transparent;
  --text-text-container: var(--text-primary);
  
  /* Avatar Container */
  --background-avatar-container: transparent;
  --border-avatar-container: transparent;
  
  /* === BASIC LAYOUT === */
  /* Container Dimensions */
  --container-width: 55%;
  --container-width-outer: 53.3%;
  --content-width: 98%;
  --sidebar-width: 20%;
  --avatar-width: 20%;
  --avatar-height: 850px;
  --sidebar-height: 850px;
  --button-width: 100px;
  --button-height: 50px;
  --log-width: 50vw;
  --log-height: 10vh;
  --chat-width: 20vw;
  --chat-height: 33vh;
  
  /* Margins */
  --margin-auto: auto;
  --margin-top-large: 100px;
  
  /* Padding */
  --padding-base: 10px;
  --padding-small: 5px;
  --padding-large: 20px;
  
  /* Borders */
  --border-primary: #cfc9b7;
  --border-card: #fcf5ef;
  
  /* Box Shadows */
  --box-shadow-light: 0px 15px 19px #24221b;
  
  /* Z-Index */
  --z-index-background: -1;
  --z-index-avatar: 10;
  --z-index-npc: 5;
  --z-index-bg: 1;
  --z-index-behind-head: 2;
  --z-index-face: 3;
  --z-index-body: 4;
  --z-index-genital: 5;
  --z-index-breast: 6;
  --z-index-pubic: 7;
  --z-index-chas: 8;
  --z-index-cloth: 9;
  --z-index-visible-genitals: 10;
  --z-index-visible-bodyhair: 11;
  --z-index-apron: 12;
  --z-index-collar: 13;
  --z-index-beard: 14;
  --z-index-hair: 15;
  --z-index-cap: 16;
  --z-index-hood: 17;
  --z-index-headgear: 18;
  --z-index-new-avatar: 19;
  --z-index-cover-all: 20;
  --z-index-menu-button: 100;
  --z-index-log: 50;
  --z-index-chat: 50;
  
  /* === POSITIONING === */
  /* Fixed positioning values */
  --position-top: 10%;
  --position-left: 4%;
  --position-right: 4%;
  --position-bottom: 5vh;
  
  /* Viewport units */
  --viewport-width-left: 5vw;
  --viewport-width-right: 5vw;
  --viewport-height-bottom: 10vh;
  --viewport-height-right: 33vh;
  
  /* === BASIC EFFECTS === */
  /* Box Shadows */
  --box-shadow-light: 0px 15px 19px var(--shadow-dark);
  --box-shadow-medium: 0 0 16px var(--shadow-color);
  --box-shadow-heavy: 2px 3px 6px var(--shadow-light);
  
  /* Border Radius */
  --border-radius: 25px;
  --border-radius-small: 0;
  
  /* Transitions */
  --transition-color: color 0.5s;
  --transition-background: background 0.3s;
  
  /* Opacity */
  --opacity-overlay: 0.6;
  --opacity-card: 0.95;
}

/* === BIMBO THEME VARIABLES === */
[data-theme="bimbo"] {
  /* Override primary colors for bimbo theme */
  --primary-color: #d10fff;
  --primary-hover: #f32fff;
  
  /* Override background */
  --background-main: linear-gradient(#f9b3f9,#00395a);
  
  /* Override text colors */
  --text-primary: #146dcc;
  
  /* Override typography */
  --font-family-primary: 'Mali', sans-serif;
  --font-size-base: 1.15em;
  
  /* Override sidebar */
  --background-sidebar: #1c0f21;
  --border-primary: #0c539e;
  --text-sidebar: #1177b5;
}

/* === NIGHT MODE VARIABLES === */
[data-night-mode="true"] {
  /* Override colors for night mode */
  --background-main: url(../Img/newbgnight.png) no-repeat #070621;
  --background-light: var(--background-dark);
  --text-light: var(--text-dark);
  --background-card: var(--background-dark);
  --text-primary: #26325c;
  --background-sidebar: #090912;
  --text-sidebar: #3f4a72;
  --primary-color: #4d0fff;
  --primary-hover: #9c00ff;
  --border-primary: #26325c;
}