/**
 * Theme System - All customizable CSS variables
 * These variables control the entire look and feel of both login and game views
 */

:root {
  /* ============================================
     Background Colors
     ============================================ */
  --theme-bg-primary: #1a1a1a;      /* Main background */
  --theme-bg-secondary: #2a2a2a;    /* Header, sidebar backgrounds */
  --theme-bg-tertiary: #333333;     /* Hover states, subtle backgrounds */
  --theme-bg-input: #1a1a1a;        /* Input field backgrounds */
  
  /* ============================================
     Text Colors
     ============================================ */
  --theme-text-primary: #e0e0e0;    /* Main text */
  --theme-text-secondary: #aaaaaa;  /* Secondary text */
  --theme-text-muted: #666666;      /* Muted/disabled text */
  --theme-text-highlight: #ffffff;  /* Emphasized text */
  
  /* ============================================
     Border Colors
     ============================================ */
  --theme-border-primary: #444444;   /* Main borders */
  --theme-border-secondary: #333333; /* Subtle borders */
  --theme-border-highlight: #666666; /* Hover/focus borders */
  
  /* ============================================
     Room-specific Colors
     ============================================ */
  --theme-room-name: #4CAF50;       /* Room names */
  --theme-room-region: #888888;     /* Region names */
  --theme-exit-color: #87CEEB;      /* Exit links */
  --theme-item-color: #FFD700;      /* Items */
  --theme-corpse-color: #999999;    /* Corpses */
  
  /* ============================================
     Player Colors
     ============================================ */
  --theme-player-name: #4CAF50;     /* Your character name */
  --theme-player-other: #00CED1;    /* Other players */
  
  /* ============================================
     Faction Colors
     ============================================ */
  --theme-faction-friendly: #90EE90;  /* Friendly NPCs */
  --theme-faction-neutral: #e0e0e0;   /* Neutral NPCs */
  --theme-faction-hostile: #FFA500;   /* Hostile NPCs */
  --theme-faction-enemy: #FF0000;     /* Enemy NPCs */
  
  /* ============================================
     Stat Bar Colors
     ============================================ */
  --theme-health-high: #4CAF50;     /* Health 75%+ */
  --theme-health-medium: #FFC107;   /* Health 50-75% */
  --theme-health-low: #FF9800;      /* Health 25-50% */
  --theme-health-critical: #FF0000; /* Health <25% */
  --theme-mana: #2196F3;            /* Mana bar */
  --theme-stamina: #FFC107;         /* Stamina bar */
  --theme-exp: #9C27B0;             /* Experience bar */
  
  /* ============================================
     Combat Message Colors
     ============================================ */
  --theme-combat-damage: #FF6B6B;   /* Damage messages */
  --theme-combat-miss: #888888;     /* Miss/dodge messages */
  --theme-combat-critical: #FF0000; /* Critical hits */
  --theme-combat-heal: #00FF00;     /* Healing messages */
  
  /* ============================================
     Chat Channel Colors
     ============================================ */
  --theme-chat-say: #FFFFFF;        /* Say channel */
  --theme-chat-ooc: #E0E0E0;        /* OOC channel */
  --theme-chat-tell: #FF69B4;       /* Private tells */
  --theme-chat-guild: #90EE90;      /* Guild chat */
  --theme-chat-shout: #FFA500;      /* Shout/yell */
  --theme-chat-emote: #DDA0DD;      /* Emotes */
  
  /* ============================================
     UI Feedback Colors
     ============================================ */
  --theme-success: #4CAF50;         /* Success messages */
  --theme-warning: #FFC107;         /* Warning messages */
  --theme-error: #F44336;           /* Error messages */
  --theme-info: #2196F3;            /* Info messages */
  
  /* ============================================
     Login-specific Accent Colors
     ============================================ */
  --theme-accent-green: #4CAF50;           /* Primary button color */
  --theme-accent-green-hover: #45a049;     /* Primary button hover */
  --theme-accent-blue: #2196F3;            /* Secondary accent */
  --theme-accent-blue-hover: #1976D2;      /* Secondary hover */
  
  /* ============================================
     Font Settings
     ============================================ */
  --theme-font-family: 'Consolas', 'Courier New', monospace;
  --theme-font-size-base: 14px;
  --theme-font-size-small: 12px;
  --theme-font-size-large: 16px;
  --theme-font-size-xlarge: 18px;
  --theme-line-height: 1.4;
  
  /* ============================================
     Spacing
     ============================================ */
  --theme-spacing-xs: 4px;
  --theme-spacing-sm: 8px;
  --theme-spacing-md: 12px;
  --theme-spacing-lg: 16px;
  --theme-spacing-xl: 24px;
  
  /* ============================================
     Animation Speeds
     ============================================ */
  --theme-transition-speed: 0.3s;
  --theme-animation-speed: 0.2s;
  --theme-animation-slow: 0.5s;
  
  /* ============================================
     Layout Dimensions (not themeable, but centralized)
     ============================================ */
  --layout-header-height: 120px;
  --layout-player-width: 300px;
  --layout-sidebar-width: 280px;
  --layout-command-height: 36px;
  --layout-stat-bar-height: 18px;
}

/* ============================================
   Base Styles
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--theme-font-family);
  font-size: var(--theme-font-size-base);
  line-height: var(--theme-line-height);
  background: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  overflow: hidden;
  height: 100vh;
}

/* View Containers */
.view-container {
  display: none;
  width: 100%;
  height: 100vh;
}

.view-container.active {
  display: flex;
  flex-direction: column;
}

/* Links */
a {
  color: var(--theme-accent-blue);
  text-decoration: none;
  transition: color var(--theme-transition-speed);
}

a:hover {
  color: var(--theme-accent-blue-hover);
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--theme-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--theme-border-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-border-highlight);
}

/* Selection */
::selection {
  background: var(--theme-accent-blue);
  color: white;
}

/* Focus States */
:focus-visible {
  outline: 2px solid var(--theme-accent-blue);
  outline-offset: 2px;
}

/* Buttons */
button {
  font-family: inherit;
  cursor: pointer;
  transition: all var(--theme-transition-speed);
}

/* Inputs */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  background: var(--theme-bg-input);
  color: var(--theme-text-primary);
  border: 1px solid var(--theme-border-secondary);
  transition: all var(--theme-transition-speed);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--theme-accent-green);
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

/* Disabled Elements */
:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hidden Elements */
.hidden {
  display: none !important;
}

/* Loading Spinner */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--theme-border-secondary);
  border-top-color: var(--theme-accent-green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}