/* themes.css - Light and Dark Mode Variables */

/* -------------------------------------------------------------------------- */
/* Base Variables (fallbacks and shared defaults) */
:root {
  /* Layout & Surfaces */
  --clr-bg: #ffffff;
  --clr-surface: #f7f7f7;
  --clr-overlay: rgba(0, 0, 0, 0.05);

  /* Typography */
  --clr-text-primary: #2d2d2d;
  --clr-text-secondary: #6b6b6b;
  --clr-text-disabled: #a8a8a8;

  /* Borders & Dividers */
  --clr-border: #e0e0e0;
  --clr-border-muted: #d1d1d1;

  /* Primary Palette */
  --clr-primary: #3b82f6;
  --clr-primary-hover: #2563eb;
  --clr-primary-active: #1e40af;

  /* Secondary Palette */
  --clr-secondary: #10b981;
  --clr-secondary-hover: #059669;
  --clr-secondary-active: #047857;

  /* Semantic Colors */
  --clr-success: #22c55e;
  --clr-warning: #eab308;
  --clr-error: #ef4444;

  /* Shadows */
  --clr-shadow-sm: 0 1px 2px var(--clr-overlay);
  --clr-shadow-md: 0 4px 6px var(--clr-overlay);
  --clr-shadow-lg: 0 10px 15px var(--clr-overlay);

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;

  /* Animation Durations */
  --transition-fast: 0.2s;
  --transition-medium: 0.3s;
  --transition-slow: 0.5s;

  /* Chat Icon & Username (default) */
  --icon-color: var(--clr-text-secondary);
  --icon-hover-color: var(--clr-text-primary);
  --chat-username-self: var(--clr-primary);
  --chat-username-other: var(--clr-secondary);
}

/* -------------------------------------------------------------------------- */
/* Light Theme Overrides */
:root[data-theme="light"] {
  /* Core */
  --clr-bg: #ffffff;
  --clr-surface: #f7f7f7;
  --clr-overlay: rgba(0, 0, 0, 0.05);

  /* Text */
  --clr-text-primary: #2d2d2d;
  --clr-text-secondary: #6b6b6b;
  --clr-text-disabled: #a8a8a8;

  /* Borders */
  --clr-border: #e0e0e0;
  --clr-border-muted: #d1d1d1;

  /* Palette */
  --clr-primary: #3b82f6;
  --clr-primary-hover: #2563eb;
  --clr-primary-active: #1e40af;

  --clr-secondary: #10b981;
  --clr-secondary-hover: #059669;
  --clr-secondary-active: #047857;

  /* Semantic */
  --clr-success: #22c55e;
  --clr-warning: #eab308;
  --clr-error: #ef4444;

  /* Chat Specific */
  --chat-bg: var(--clr-bg);
  --chat-border: var(--clr-border);
  --chat-accent: var(--clr-primary);
  --chat-user-bg: rgba(59, 130, 246, 0.1);
  --chat-discord-bg: rgba(242, 242, 242, 0.8);
  --chat-input-bg: #ffffff;
  --chat-input-border: var(--clr-border);
  --chat-input-text: var(--clr-text-primary);
  --chat-input-placeholder: var(--clr-text-secondary);

  /* Icons */
  --icon-color: var(--clr-text-secondary);
  --icon-hover-color: var(--clr-text-primary);
}

/* -------------------------------------------------------------------------- */
/* Dark Theme Overrides */
:root[data-theme="dark"] {
  /* Core */
  --clr-bg: #1e1e1e;
  --clr-surface: #0f172a;
  --clr-overlay: rgba(0, 0, 0, 0.7);

  /* Text */
  --clr-text-primary: #e0e0e0;
  --clr-text-secondary: #b3b3b3;
  --clr-text-disabled: #737373;

  /* Borders */
  --clr-border: #3a3a3a;
  --clr-border-muted: #4d4d4d;

  /* Palette */
  --clr-primary: #34d399;
  
  --clr-primary-hover: #3b82f6;
  --clr-primary-active: #2563eb;

  --clr-secondary: #34d399;
  --clr-secondary-hover: #10b981;
  --clr-secondary-active: #059669;

  /* Semantic */
  --clr-success: #22c55e;
  --clr-warning: #fbbf24;
  --clr-error: #f87171;

  /* Chat Specific */
  --chat-bg: var(--clr-surface);
  --chat-border: var(--clr-border);
  --chat-accent: var(--clr-primary-hover);
  --chat-user-bg: rgba(96, 165, 250, 0.15);
  --chat-discord-bg: rgba(50, 50, 50, 0.9);
  --chat-input-bg: #333333;
  --chat-input-border: var(--clr-border);
  --chat-input-text: var(--clr-text-primary);
  --chat-input-placeholder: var(--clr-text-secondary);

  /* Icons */
  --icon-color: var(--clr-text-primary);
  --icon-hover-color: var(--clr-primary-hover);

  /* Usernames */
  --chat-username-self: var( --clr-secondary);
  --chat-username-other: var(--clr-primary);
}

/* -------------------------------------------------------------------------- */
/* Utility Classes (apply semantic colors) */
.text-primary   { color: var(--clr-text-primary); }
.text-secondary { color: var(--clr-text-secondary); }
.text-disabled  { color: var(--clr-text-disabled); }
.bg-primary     { background-color: var(--clr-primary); }
.bg-secondary   { background-color: var(--clr-secondary); }
.bg-success     { background-color: var(--clr-success); }
.bg-warning     { background-color: var(--clr-warning); }
.bg-error       { background-color: var(--clr-error); }
.border          { border-color: var(--clr-border); }
.shadow-sm      { box-shadow: var(--clr-shadow-sm); }
.shadow-md      { box-shadow: var(--clr-shadow-md); }
.shadow-lg      { box-shadow: var(--clr-shadow-lg); }