/*
 * Terminal D&D Design Tokens
 * ================================
 * Single source of truth for all design variables.
 * Import this file first in any terminal-related stylesheet.
 */

/* FOUC Prevention: Show body once CSS is loaded */
body.css-loading {
  visibility: visible;
}

:root {
  /* ========================================
   * COLOR PALETTE
   * ======================================== */

  /* Background Colors */
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #2d2d2d;
  --color-bg-tertiary: #3d3d3d;
  --color-bg-elevated: #404040;
  --color-bg-hover: #4a4a4a;

  /* Text Colors */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #666666;
  --color-text-inverse: #1a1a1a;

  /* Accent Colors */
  --color-accent-primary: #61afef;    /* Blue - interactive elements */
  --color-accent-secondary: #98c379;  /* Green - success, HP, nature */
  --color-accent-warning: #e5c07b;    /* Gold - warnings, items */
  --color-accent-error: #e06c75;      /* Red - errors, damage */
  --color-accent-purple: #c678dd;     /* Purple - DM, magic */

  /* Semantic Colors */
  --color-hp-full: #98c379;
  --color-hp-mid: #e5c07b;
  --color-hp-low: #e06c75;
  --color-xp: #61afef;
  --color-gold: #ffd700;

  /* Border Colors */
  --color-border-default: #404040;
  --color-border-subtle: #333333;
  --color-border-focus: #61afef;

  /* Entity Type Colors (for chips, tooltips, cards) */
  --color-entity-npc: #22d3ee;           /* Cyan - NPCs and characters */
  --color-entity-location: #98c379;      /* Green - Locations and places */
  --color-entity-item: #e5c07b;          /* Gold - Items and equipment */
  --color-entity-creature: #e06c75;      /* Red - Creatures and monsters */
  --color-entity-spell: #c678dd;         /* Purple - Spells and magic */
  --color-entity-quest: #61afef;         /* Blue - Quests and objectives */
  --color-entity-faction: #d19a66;       /* Orange - Factions and groups */
  --color-entity-lore: #abb2bf;          /* Gray - Lore and knowledge */

  /* Entity Hover/Glow Variants (15% opacity for backgrounds, 30% for glows) */
  --color-entity-npc-bg: rgba(34, 211, 238, 0.15);
  --color-entity-npc-glow: 0 0 8px rgba(34, 211, 238, 0.3);
  --color-entity-location-bg: rgba(152, 195, 121, 0.15);
  --color-entity-location-glow: 0 0 8px rgba(152, 195, 121, 0.3);
  --color-entity-item-bg: rgba(229, 192, 123, 0.15);
  --color-entity-item-glow: 0 0 8px rgba(229, 192, 123, 0.3);
  --color-entity-creature-bg: rgba(224, 108, 117, 0.15);
  --color-entity-creature-glow: 0 0 8px rgba(224, 108, 117, 0.3);
  --color-entity-spell-bg: rgba(198, 120, 221, 0.15);
  --color-entity-spell-glow: 0 0 8px rgba(198, 120, 221, 0.3);
  --color-entity-quest-bg: rgba(97, 175, 239, 0.15);
  --color-entity-quest-glow: 0 0 8px rgba(97, 175, 239, 0.3);

  /* Speech Bubble Colors */
  --bubble-player-bg: rgba(152, 195, 121, 0.12);
  --bubble-player-border: rgba(152, 195, 121, 0.35);
  --bubble-dm-bg: rgba(139, 69, 19, 0.08);
  --bubble-dm-border: rgba(198, 120, 221, 0.4);
  --bubble-npc-opacity: 0.12;
  --bubble-scene-bg: transparent;
  --bubble-system-bg: rgba(171, 178, 191, 0.08);
  --bubble-tail-size: 10px;
  --bubble-radius: 12px;
  --bubble-max-width: 85%;

  /* Legacy aliases (for backwards compatibility during migration) */
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-tertiary: var(--color-bg-tertiary);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --accent-primary: var(--color-accent-primary);
  --accent-secondary: var(--color-accent-secondary);
  --accent-warning: var(--color-accent-warning);
  --accent-error: var(--color-accent-error);
  --accent-purple: var(--color-accent-purple);
  --border-color: var(--color-border-default);

  /* Semantic aliases (used by creation_mode, world_selector, etc.) */
  --color-bg: var(--color-bg-primary);
  --color-text: var(--color-text-primary);
  --color-surface: var(--color-bg-secondary);
  --color-surface-hover: var(--color-bg-hover);
  --color-surface-elevated: var(--color-bg-elevated);

  /* Surface Colors (for DM panels) */
  --surface-dark: var(--color-bg-primary);
  --surface-darker: #141414;
  --surface-hover: var(--color-bg-hover);
  --color-border: var(--color-border-default);
  --color-accent-blue: var(--color-accent-primary);
  --color-accent-green: var(--color-accent-secondary);
  --color-accent-success: var(--color-accent-secondary);  /* Semantic alias for success states */
  --color-accent-yellow: var(--color-accent-warning);
  --color-accent-red: var(--color-accent-error);

  /* Status/Semantic Background Colors (for badges, alerts, etc.) */
  --color-success-bg: rgba(152, 195, 121, 0.15);
  --color-success-text: #98c379;
  --color-warning-bg: rgba(229, 192, 123, 0.15);
  --color-warning-text: #e5c07b;
  --color-info-bg: rgba(97, 175, 239, 0.15);
  --color-info-text: #61afef;
  --color-accent-bg: rgba(97, 175, 239, 0.1);

  /* Overlay Colors (for backdrops, shadows, transparency) */
  --overlay-light: rgba(0, 0, 0, 0.2);
  --overlay-light-plus: rgba(0, 0, 0, 0.3);
  --overlay-medium: rgba(0, 0, 0, 0.4);
  --overlay-medium-plus: rgba(0, 0, 0, 0.5);
  --overlay-heavy: rgba(0, 0, 0, 0.6);
  --overlay-dark: rgba(0, 0, 0, 0.8);
  --overlay-darker: rgba(0, 0, 0, 0.85);
  --overlay-white-subtle: rgba(255, 255, 255, 0.05);
  --overlay-white-light: rgba(255, 255, 255, 0.1);
  --overlay-white-medium: rgba(255, 255, 255, 0.2);
  --overlay-gold-subtle: rgba(255, 215, 0, 0.1);
  --overlay-gold-light: rgba(255, 215, 0, 0.2);
  --overlay-gold-medium: rgba(255, 215, 0, 0.3);

  /* Spacing aliases (semantic names) */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);

  /* ========================================
   * TYPOGRAPHY
   * ======================================== */

  /* Font Families */
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Courier New', Courier, 'Liberation Mono', monospace;

  /* Font Sizes */
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========================================
   * SPACING SCALE (tightened for flat UI)
   * ======================================== */

  --space-0-5: 2px;
  --space-1: 3px;
  --space-1-5: 4px;
  --space-2: 6px;
  --space-2-5: 8px;
  --space-3: 10px;
  --space-3-5: 12px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 22px;
  --space-8: 28px;
  --space-10: 36px;
  --space-12: 44px;

  /* ========================================
   * BORDER RADIUS (sharper for flat UI)
   * ======================================== */

  --radius-sm: 0;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 4px;
  --radius-full: 9999px;

  /* ========================================
   * SHADOWS (removed for flat UI, keep glow for effects)
   * ======================================== */

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-glow: 0 0 12px rgba(97, 175, 239, 0.4);
  --shadow-glow-success: 0 0 12px rgba(152, 195, 121, 0.4);
  --shadow-glow-warning: 0 0 12px rgba(229, 192, 123, 0.4);
  --shadow-glow-error: 0 0 12px rgba(224, 108, 117, 0.4);
  --shadow-glow-gold: 0 0 12px rgba(255, 215, 0, 0.4);
  --shadow-glow-purple: 0 0 12px rgba(198, 120, 221, 0.4);

  /* Subtle glow variants (8px, lower intensity) */
  --shadow-glow-sm: 0 0 8px rgba(97, 175, 239, 0.25);
  --shadow-glow-sm-gold: 0 0 8px rgba(255, 215, 0, 0.2);

  /* Focus Ring (for accessibility) */
  --focus-ring: 0 0 0 2px var(--color-border-focus);
  --focus-ring-offset: 2px;

  /* ========================================
   * TRANSITIONS
   * ======================================== */

  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-resize: 150ms ease-out;

  /* ========================================
   * Z-INDEX SCALE
   * ======================================== */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-tooltip: 500;
  --z-notification: 600;

  /* ========================================
   * LAYOUT - SPLIT SYSTEM
   * ======================================== */

  /* Split Container (thinner for flat UI) */
  --split-divider-size: 2px;
  --split-divider-hover-color: var(--color-accent-primary);
  --panel-min-width: 200px;
  --panel-min-height: 150px;

  /* Status Bar */
  --status-bar-height: 44px;
  --status-bar-padding: var(--space-2) var(--space-4);

  /* Side Panel */
  --panel-width-default: 380px;
  --panel-width-min: 280px;
  --panel-width-max: 600px;

  /* Input Area */
  --input-height: 40px;
  --input-padding: var(--space-2) var(--space-3);

  /* ========================================
   * COMPONENTS - NARRATIVE (tightened for flat UI)
   * ======================================== */

  --narrative-entry-spacing: var(--space-2);
  --narrative-border-width: 0;
  --narrative-padding: var(--space-3);

  /* Entry Type Colors */
  --color-entry-dm: var(--color-accent-purple);
  --color-entry-player: var(--color-accent-primary);
  --color-entry-system: var(--color-accent-warning);
  --color-entry-error: var(--color-accent-error);
  --color-entry-roll: var(--color-accent-primary);
  --color-entry-combat: var(--color-accent-error);
  --color-entry-npc: var(--color-accent-purple);
  --color-entry-item: var(--color-accent-warning);
  --color-entry-location: var(--color-accent-secondary);

  /* ========================================
   * COMPONENTS - CHIPS & BADGES
   * ======================================== */

  --chip-height: 28px;
  --chip-padding: var(--space-1) var(--space-3);
  --chip-gap: var(--space-2);
  --chip-border-radius: var(--radius-md);

  --badge-height: 20px;
  --badge-padding: var(--space-1) var(--space-2);
  --badge-font-size: var(--font-size-xs);

  /* ========================================
   * COMPONENTS - TRAYS
   * ======================================== */

  --tray-padding: var(--space-3);
  --tray-gap: var(--space-2);
  --tray-border-radius: var(--radius-lg);

  /* ========================================
   * CANVAS EFFECTS
   * ======================================== */

  --effect-ambient-opacity: 0.3;
  --effect-feedback-opacity: 0.8;
  --effect-particle-count: 100;

  /* ========================================
   * SCROLLBAR
   * ======================================== */

  --scrollbar-width: 8px;
  --scrollbar-track-color: var(--color-bg-primary);
  --scrollbar-thumb-color: var(--color-bg-tertiary);
  --scrollbar-thumb-hover-color: var(--color-bg-elevated);
}

/* ========================================
 * DARK MODE OVERRIDES (if ever needed)
 * ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Already dark by default */
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
    --transition-resize: 0ms;
    --effect-ambient-opacity: 0;
    --effect-particle-count: 0;
  }
}