/* CSS Custom Properties for D&D Play Screen */
:root {
  /* Color Palette */
  --color-primary: #aa7831;
  --color-primary-light: #e6b35a;
  --color-primary-dark: #543912;
  --color-gold: #b8860b;
  --color-gold-light: #d4af37;
  --color-gold-dark: #8b6914;
  --color-gold-shadow: #6b4423;
  
  /* Background Colors */
  --bg-primary: #111;
  --bg-secondary: #18191a;
  --bg-card: #222;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-modal: #18191a;
  
  /* Text Colors */
  --text-primary: #fff;
  --text-secondary: #aaa;
  --text-gold: var(--color-gold);
  
  /* Border Colors */
  --border-primary: #543912;
  --border-secondary: #666;
  --border-gold: var(--color-primary);
  
  /* Shadow Colors */
  --shadow-gold: #e6b35a88;
  --shadow-gold-strong: #b18c3e66;
  --shadow-dark: rgba(0, 0, 0, 0.8);
  --shadow-card: 0 4px 18px #0006;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 50%;
  
  /* Font Sizes */
  --font-xs: 10px;
  --font-sm: 12px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-xxl: 24px;
  
  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* Transitions */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.4s;
  
  /* Character Portrait Dimensions */
  --portrait-width: 350px;
  --portrait-height: 650px;
  
  /* Button Heights */
  --button-height-sm: 40px;
  --button-height-md: 65px;
  --button-height-lg: 80px;
}