/* Dialogue Forge Theme - Dark Fantasy, Earthy Tones */
/* CSS Variables for Tailwind v3 compatibility */

:root {
  /* Base Colors */
  --color-df-base: oklch(0.15 0.02 250);
  --color-df-surface: oklch(0.18 0.02 260);
  --color-df-elevated: oklch(0.22 0.02 270);
  
  /* Node Colors - General */
  --color-df-node-bg: oklch(0.20 0.03 240);
  --color-df-node-border: oklch(0.35 0.05 220);
  --color-df-node-selected: oklch(0.45 0.12 15);
  --color-df-node-dimmed: oklch(0.15 0.02 250);
  
  /* NPC Node Colors - Earthy Brown/Tan (duller borders, bright when selected) */
  --color-df-npc-bg: oklch(0.25 0.04 45);
  --color-df-npc-border: oklch(0.35 0.05 35);
  --color-df-npc-header: oklch(0.30 0.10 25);
  --color-df-npc-text: oklch(0.85 0.02 250);
  --color-df-npc-selected: oklch(0.60 0.20 15);
  
  /* Player Node Colors - Deep Purple/Magenta (duller borders, bright when selected) */
  --color-df-player-bg: oklch(0.22 0.08 300);
  --color-df-player-border: oklch(0.38 0.10 310);
  --color-df-player-header: oklch(0.28 0.12 290);
  --color-df-player-text: oklch(0.85 0.02 250);
  --color-df-player-selected: oklch(0.65 0.25 280);
  
  /* Conditional Node Colors - Forest Green (duller borders, bright when selected) */
  --color-df-conditional-bg: oklch(0.24 0.06 150);
  --color-df-conditional-border: oklch(0.35 0.08 140);
  --color-df-conditional-header: oklch(0.30 0.10 145);
  --color-df-conditional-text: oklch(0.85 0.02 250);
  
  /* Start/End Badges */
  --color-df-start: oklch(0.55 0.15 140);
  --color-df-start-bg: oklch(0.25 0.08 140);
  --color-df-end: oklch(0.50 0.15 45);
  --color-df-end-bg: oklch(0.25 0.08 45);
  
  /* Edge Colors (duller default, bright on hover/selection) */
  --color-df-edge-default: oklch(0.35 0.02 250);
  --color-df-edge-default-hover: oklch(0.55 0.10 250);
  --color-df-edge-choice-1: oklch(0.45 0.12 15);
  --color-df-edge-choice-2: oklch(0.50 0.15 280);
  --color-df-edge-choice-3: oklch(0.48 0.12 200);
  --color-df-edge-choice-4: oklch(0.52 0.12 120);
  --color-df-edge-choice-5: oklch(0.45 0.10 45);
  --color-df-edge-loop: oklch(0.50 0.12 60);
  --color-df-edge-dimmed: oklch(0.25 0.02 250);
  
  /* Status Colors */
  --color-df-error: oklch(0.55 0.22 25);
  --color-df-error-bg: oklch(0.25 0.10 25);
  --color-df-warning: oklch(0.65 0.18 70);
  --color-df-warning-bg: oklch(0.25 0.10 70);
  --color-df-success: oklch(0.60 0.18 150);
  --color-df-success-bg: oklch(0.25 0.10 150);
  --color-df-info: oklch(0.55 0.15 220);
  --color-df-info-bg: oklch(0.25 0.08 220);
  
  /* Text Colors */
  --color-df-text-primary: oklch(0.85 0.02 250);
  --color-df-text-secondary: oklch(0.65 0.02 250);
  --color-df-text-tertiary: oklch(0.45 0.02 250);
  --color-df-text-muted: oklch(0.40 0.02 250);
  
  /* UI Control Colors */
  --color-df-control-bg: oklch(0.18 0.02 260);
  --color-df-control-border: oklch(0.30 0.03 250);
  --color-df-control-hover: oklch(0.25 0.03 250);
  --color-df-control-active: oklch(0.35 0.05 250);
  
  /* Flag Colors */
  --color-df-flag-dialogue: oklch(0.45 0.03 250);
  --color-df-flag-dialogue-bg: oklch(0.20 0.02 250);
  --color-df-flag-quest: oklch(0.50 0.15 220);
  --color-df-flag-quest-bg: oklch(0.22 0.08 220);
  --color-df-flag-achievement: oklch(0.60 0.18 70);
  --color-df-flag-achievement-bg: oklch(0.25 0.10 70);
  --color-df-flag-item: oklch(0.55 0.15 150);
  --color-df-flag-item-bg: oklch(0.25 0.08 150);
  --color-df-flag-stat: oklch(0.55 0.18 280);
  --color-df-flag-stat-bg: oklch(0.25 0.10 280);
  --color-df-flag-title: oklch(0.55 0.18 330);
  --color-df-flag-title-bg: oklch(0.25 0.10 330);
  --color-df-flag-global: oklch(0.50 0.15 45);
  --color-df-flag-global-bg: oklch(0.25 0.08 45);
  
  /* Canvas/Background */
  --color-df-canvas-bg: oklch(0.12 0.01 250);
  --color-df-canvas-grid: oklch(0.20 0.02 250);
  
  /* Sidebar/Editor */
  --color-df-sidebar-bg: oklch(0.18 0.02 260);
  --color-df-sidebar-border: oklch(0.35 0.05 250);
  --color-df-editor-bg: oklch(0.15 0.02 240);
  --color-df-editor-border: oklch(0.30 0.03 250);
  
  /* Shadows */
  --shadow-df-sm: 0 2px 4px oklch(0 0 0 / 0.3);
  --shadow-df-md: 0 4px 8px oklch(0 0 0 / 0.4);
  --shadow-df-lg: 0 8px 16px oklch(0 0 0 / 0.5);
  --shadow-df-glow: 0 0 12px oklch(0.45 0.12 15 / 0.3);
}