/*
 * =================================================================
 * File: theme.css
 * Purpose: Living Realms color system and design tokens
 *
 * This file defines the complete color palette and design variables
 * used throughout the Living Realms application. All colors are
 * namespaced with --lr- prefix to avoid conflicts.
 *
 * Categories:
 * - Primary (indigo): Main brand color for actions and emphasis
 * - Success (emerald): Positive states, confirmations
 * - Warning (amber): Caution states, alerts
 * - Danger (red): Error states, destructive actions
 * - Info (blue): Informational content
 * - Gray scale: Surfaces, text hierarchy, borders
 * - Dark theme: Alternative color scheme for specific pages
 * - Card variants: Entity-specific backgrounds (NPC, Quest, Service, Area)
 * - Special: Gold and other accent colors
 *
 * Usage:
 *   background-color: var(--lr-primary);
 *   color: var(--lr-text-muted);
 *   border-color: var(--lr-border);
 *
 * Quality Verification:
 *   Test:   Not Started
 *   Review: Not Started
 *   Spec:   Not Started
 * =================================================================
 */

:root {
  /* ===================================
   * Primary Colors (Indigo)
   * Used for: Primary buttons, focus rings, skip links, main actions
   * =================================== */
  --lr-primary-lighter: #a5b4fc;       /* indigo-300 */
  --lr-primary-light: #818cf8;         /* indigo-400 */
  --lr-primary: #6366f1;               /* indigo-500 */
  --lr-primary-medium: #4f46e5;        /* indigo-600 - main brand color */
  --lr-primary-dark: #4338ca;          /* indigo-700 */
  --lr-primary-darker: #3730a3;        /* indigo-800 */
  --lr-primary-bg: rgba(99, 102, 241, 0.1);  /* indigo-500 at 10% opacity */

  /* ===================================
   * Success Colors (Emerald/Green)
   * Used for: Success badges, confirmations, positive states
   * =================================== */
  --lr-success: #10b981;               /* emerald-500 */
  --lr-success-dark: #059669;          /* emerald-600 */
  --lr-success-bg: rgba(16, 185, 129, 0.1);  /* emerald-500 at 10% opacity */

  /* ===================================
   * Warning Colors (Amber)
   * Used for: Warning badges, alerts, caution states
   * =================================== */
  --lr-warning: #f59e0b;               /* amber-500 */
  --lr-warning-dark: #d97706;          /* amber-600 */
  --lr-warning-bg: rgba(245, 158, 11, 0.1);  /* amber-500 at 10% opacity */
  --lr-warning-glow: rgba(245, 158, 11, 0.7);  /* amber-500 at 70% - pulse effects */

  /* ===================================
   * Danger Colors (Red)
   * Used for: Error badges, destructive actions, critical states
   * =================================== */
  --lr-danger: #ef4444;                /* red-500 */
  --lr-danger-dark: #dc2626;           /* red-600 */
  --lr-danger-bg: rgba(239, 68, 68, 0.1);  /* red-500 at 10% opacity */

  /* ===================================
   * Info Colors (Blue)
   * Used for: Informational badges, help content, neutral emphasis
   * =================================== */
  --lr-info: #3b82f6;                  /* blue-500 */
  --lr-info-dark: #2563eb;             /* blue-600 */

  /* ===================================
   * Gray Scale (Surfaces, Text, Borders)
   * Used for: Backgrounds, text hierarchy, borders, UI structure
   * =================================== */
  --lr-gray-50: #f9fafb;               /* Page backgrounds, light surfaces */
  --lr-gray-100: #f3f4f6;              /* Skeleton loading, subtle backgrounds */
  --lr-gray-200: #e5e7eb;              /* Borders, dividers, spinner tracks */
  --lr-gray-300: #d1d5db;              /* Hover borders, outline buttons */
  --lr-gray-400: #9ca3af;              /* Outline button hover borders */
  --lr-gray-500: #6b7280;              /* Muted text, subtitles, placeholders */
  --lr-gray-600: #4b5563;              /* Body text, secondary content */
  --lr-gray-700: #374151;              /* Headings, emphasized text */
  --lr-gray-800: #1f2937;              /* Strong headings, primary text */

  /* Semantic aliases for common use cases */
  --lr-bg: #f9fafb;                    /* Page background */
  --lr-surface: #f9fafb;               /* Main surface background */
  --lr-surface-elevated: #ffffff;      /* Cards, modals, elevated surfaces */
  --lr-surface-dark: #1f2937;          /* Dark surface (sidebar bg, dark headers) */
  --lr-surface-darker: #111827;        /* Darkest surface */
  --lr-border: #e5e7eb;                /* Default border color */
  --lr-border-hover: #d1d5db;          /* Hover state borders */
  --lr-text: #1f2937;                  /* Primary text color */
  --lr-text-secondary: #4b5563;        /* Secondary text color */
  --lr-text-muted: #6b7280;            /* Muted text, less emphasis */
  --lr-text-placeholder: #9ca3af;      /* Placeholder text */

  /* ===================================
   * Dark Theme Colors
   * Used for: Material hierarchy page and other dark-themed pages
   * =================================== */
  --lr-dark-bg: #0d0d0f;               /* Dark page background */
  --lr-dark-surface: #18161a;          /* Dark surface/header */
  --lr-dark-input: #2a2830;            /* Dark input/button backgrounds */
  --lr-dark-border: #3a3840;           /* Dark borders */
  --lr-dark-text: #e8e6d7;             /* Dark theme primary text */
  --lr-dark-text-muted: #a8a6a0;       /* Dark theme muted text */
  --lr-dark-placeholder: #6a6870;      /* Dark theme placeholder text */

  /* ===================================
   * Card Variant Backgrounds
   * Used for: Entity-specific card styling (NPC, Quest, Service, Area)
   * =================================== */
  --lr-card-npc-from: #fef3c7;         /* NPC card gradient start (amber-100) */
  --lr-card-npc-to: #fef9e7;           /* NPC card gradient end (amber-50) */

  --lr-card-quest-from: #dbeafe;       /* Quest card gradient start (blue-100) */
  --lr-card-quest-to: #eff6ff;         /* Quest card gradient end (blue-50) */

  --lr-card-service-from: #fce7f3;     /* Service card gradient start (pink-100) */
  --lr-card-service-to: #fdf2f8;       /* Service card gradient end (pink-50) */

  --lr-card-area-from: #d1fae5;        /* Area card gradient start (emerald-100) */
  --lr-card-area-to: #ecfdf5;          /* Area card gradient end (emerald-50) */

  /* ===================================
   * Special Colors
   * Used for: Gold accents, special states, premium content
   * =================================== */
  --lr-gold-bg: rgba(251, 191, 36, 0.1);     /* Gold badge background */
  --lr-gold-text: rgba(180, 83, 9, 1);       /* Gold badge text */
  --lr-gold: rgba(251, 191, 36, 1);          /* Gold accent color */

  /* ===================================
   * Spacing & Layout (Future expansion)
   * Reserved for spacing scale, typography scale, etc.
   * =================================== */
  /* To be added as needed */

  /* ===================================
   * Shadows & Effects (Future expansion)
   * Reserved for box-shadow, text-shadow, etc.
   * =================================== */
  /* To be added as needed */
}

/*
 * Dark Theme Application
 * Apply the dark theme to specific pages or components
 * Example usage:
 *   <body class="dark-theme">
 */
.dark-theme {
  background-color: var(--lr-dark-bg);
  color: var(--lr-dark-text);
}

.dark-theme input,
.dark-theme select,
.dark-theme textarea,
.dark-theme button {
  background-color: var(--lr-dark-input);
  color: var(--lr-dark-text);
  border-color: var(--lr-dark-border);
}

.dark-theme ::placeholder {
  color: var(--lr-dark-placeholder);
}

/*
 * Card Variant Styling
 *
 * Card variant backgrounds (NPC, Quest, Service, Area) are defined
 * in css/ui-components.css using the canonical `.lr-card-*` classes
 * (e.g., `.lr-card-npc`, `.lr-card-quest`, `.lr-card-service`,
 * `.lr-card-area`).
 */