/* ============================================================
   LandLords — Design Tokens
   px only · dark mode via prefers-color-scheme
   ============================================================ */

:root {
  /* --- Primary (earth, leather, wood) --- */
  --color-primary: #8B4513;
  --color-primary-dark: #654321;
  --color-primary-light: #A0522D;

  /* --- Secondary (parchment, sand) --- */
  --color-secondary: #CD853F;
  --color-secondary-light: #DEB887;

  /* --- Accent (gold, royal) --- */
  --color-accent: #FFD700;
  --color-accent-hover: #FFC700;
  --color-accent-dim: rgba(255, 215, 0, 0.15);

  /* --- Backgrounds (dark default — NO LIGHT MODE) --- */
  --color-bg: #1a1a1a;
  --color-bg-light: #2d2d2d;
  --color-surface: #252525;
  --color-surface-hover: #2f2f2f;

  /* --- Text --- */
  --color-text: #F5DEB3;
  --color-text-muted: #888888;
  --color-text-light: #ffffff;
  --color-text-disabled: #555555;

  /* --- Status --- */
  --color-success: #4CAF50;
  --color-success-light: #66BB6A;
  --color-warning: #FF9800;
  --color-warning-light: #FFB74D;
  --color-error: #F44336;
  --color-error-light: #EF5350;
  --color-info: #2196F3;
  --color-info-light: #42A5F5;

  /* --- Role --- */
  --color-role-player: #888888;
  --color-role-moderator: #4CAF50;
  --color-role-admin: #FF5722;
  --color-role-cheater: #9E9E9E;

  /* --- Server Type --- */
  --color-type-pvp: #FFD700;
  --color-type-pve: #42A5F5;
  --color-type-rpg: #AB47BC;
  --color-type-casual: #66BB6A;

  /* --- Parchment --- */
  --color-parchment: #3a2a1a;
  --color-parchment-light: #4a3a2a;
  --color-parchment-edge: #2a1a0a;

  /* --- Gold effects --- */
  --color-gold-dim: rgba(255, 215, 0, 0.15);
  --color-gold-glow: rgba(255, 215, 0, 0.4);
  --color-gold-inner-border: rgba(255, 215, 0, 0.12);
  --color-gold-accent-line: rgba(255, 215, 0, 0.3);

  /* --- Viewer --- */
  --color-bg-dark: #0f0f23;
  --color-gradient-start: #1a1a2e;
  --color-gradient-end: #16213e;
  --color-primary-gradient-start: #667eea;
  --color-primary-gradient-end: #764ba2;
  --color-spinner-border: rgba(102, 126, 234, 0.2);
  --color-spinner-top: #667eea;
  --color-status-default: #aaa;
  --color-info-bg: rgba(102, 126, 234, 0.1);
  --color-row-border: rgba(102, 126, 234, 0.2);
  --color-btn-shadow: rgba(102, 126, 234, 0.4);
  --color-fps-bg: rgba(0, 0, 0, 0.6);
  --color-hud-info-bg: rgba(0, 0, 0, 0.5);
  --color-hud-info-text: #aaa;
  --color-console-bg: rgba(0, 0, 0, 0.8);
  --color-console-border: #667eea;

  /* --- Typography --- */
  --font-heading: 'Cinzel', serif;
  --font-body: 'Crimson Text', serif;
  --font-mono: 'Fira Code', monospace;

  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-30: 30px;
  --text-32: 32px;
  --text-36: 36px;
  --text-48: 48px;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* --- Spacing --- */
  --spacing-0: 0;
  --spacing-1: 1px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* --- Borders & Radius --- */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-full: 9999px;

  --border-thin: 1px solid rgba(0, 0, 0, 0.1);
  --border-thick: 2px solid var(--color-primary);
  --border-gold: 1px solid var(--color-gold-accent-line);

  /* --- Shadows --- */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px rgba(255, 215, 0, 0.3);
  --shadow-gold: 0 0 15px rgba(255, 215, 0, 0.2), 0 0 30px rgba(255, 215, 0, 0.1);
  --shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-depth: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.05);

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-index --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-modal-overlay: 1000;
  --z-modal: 1001;
  --z-tooltip: 1100;
  --z-notification: 1200;
  --z-loading: 9999;

  /* --- Layout --- */
  --header-height: 60px;
  --footer-height: 60px;
  --sidebar-width: 250px;
  --sidebar-width-collapsed: 70px;
  --news-width: 300px;
  --chat-widget-width: 360px;
  --chat-widget-height: 460px;
  --chat-widget-collapsed-height: 44px;
}