/*
 * 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;

  /* 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);

  /* 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 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-1: 3px;
  --space-2: 6px;
  --space-3: 10px;
  --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);

  /* ========================================
   * 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;
  }
}