/* CSS Variables - mtgproxy Design System */
/* Based on mtgproxy color scheme and design patterns */

:root, body[data-theme="dark"] {
  /* Background Colors - mtgproxy exact match */
  --bg-primary: #1a1b1e;           /* Main background */
  --bg-secondary: #2b2d31;         /* Sections, cards */
  --bg-surface: #1a1b1e;           /* Elevated surfaces */
  --bg-hover: #23252a;             /* Hover states */
  --bg-active: #313338;            /* Active/pressed states */
  --bg-elevated: #2b2d31;          /* Modals, dropdowns */

  /* Text Colors */
  --text-primary: rgba(255, 255, 255, 0.87);
  --text-secondary: rgba(255, 255, 255, 0.70);
  --text-tertiary: rgba(255, 255, 255, 0.50);
  --text-disabled: rgba(255, 255, 255, 0.38);
  --text-inverse: rgba(0, 0, 0, 0.87);

  /* Accent Colors - mtgproxy exact match */
  --accent-primary: #9333ea;       /* Primary brand color (purple) */
  --accent-secondary: #7c3aed;     /* Secondary purple */
  --accent-hover: #7c3aed;         /* Purple for hover */
  --accent-active: #6d28d9;        /* Active state purple */
  --accent-teal: #4db6ac;          /* Teal accent */
  --accent-gold: #f59e0b;          /* Gold accent */

  /* Border Colors - mtgproxy exact match */
  --border-primary: #9333ea;
  --border-secondary: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(147, 51, 234, 0.5);
  --border-focus: rgba(147, 51, 234, 0.6);

  /* Shadow System - mtgproxy exact match */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);

  /* Spacing System */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Status Colors - mtgproxy exact match */
  --success: #22c55e;
  --error: #ef4444;
  --warning: #eab308;
  --info: #3b82f6;
}

/* Light Theme - mtgproxy exact match */
body[data-theme="light"] {
  /* Background Colors */
  --bg-primary: #f5f5f5;
  --bg-secondary: #e8e8e8;
  --bg-surface: #f5f5f5;
  --bg-hover: #d9d9d9;
  --bg-active: #ececec;
  --bg-elevated: #f5f5f5;

  /* Text Colors */
  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.60);
  --text-tertiary: rgba(0, 0, 0, 0.45);
  --text-disabled: rgba(0, 0, 0, 0.38);
  --text-inverse: rgba(255, 255, 255, 0.87);

  /* Borders */
  --border-primary: #9333ea;
  --border-secondary: rgba(0, 0, 0, 0.12);
  --border-hover: rgba(147, 51, 234, 0.5);
  --border-focus: rgba(147, 51, 234, 0.6);

  /* Accent Colors */
  --accent-primary: #7c3aed;
  --accent-hover: #a78bfa;
  --accent-active: #9333ea;

  /* Status Colors */
  --success: #16a34a;
  --error: #dc2626;
  --warning: #ca8a04;
  --info: #2563eb;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.25);
}