/**
 * BannerCast - Monochrome Theme
 * 
 * Pure black and white - minimalist and professional
 * Perfect for professional broadcasts and classic aesthetics.
 * 
 * WCAG 2.2 AAA Contrast Ratios:
 * - --color-text (#FFFFFF) on --color-bg (#000000): 21:1 ✓ AAA (Maximum)
 * - --color-text-muted (#B3B3B3) on --color-bg (#000000): 9.7:1 ✓ AAA
 * - --color-primary (#FFFFFF) on --color-bg (#000000): 21:1 ✓ AAA
 */

[data-theme="monochrome"] {
  /* ================================
     BACKGROUND COLORS
     Pure blacks and grays
     ================================ */
  
  --color-bg: #000000;
  --color-bg-secondary: #0A0A0A;
  --color-bg-tertiary: #141414;
  --color-bg-card: #0F0F0F;
  --color-bg-inverse: #FFFFFF;
  --color-bg-hover: rgba(255, 255, 255, 0.05);
  --color-bg-active: rgba(255, 255, 255, 0.1);
  
  /* Gradients */
  --gradient-bg: linear-gradient(135deg, #000000 0%, #0A0A0A 50%, #141414 100%);
  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
  
  /* ================================
     TEXT COLORS
     Pure whites and grays
     ================================ */
  
  --color-text: #FFFFFF;
  --color-text-muted: #B3B3B3;
  --color-text-light: #8C8C8C;
  --color-text-inverse: #000000;
  --color-text-link: #FFFFFF;
  --color-text-link-hover: #E6E6E6;
  
  /* ================================
     PRIMARY COLORS
     Monochrome palette
     ================================ */
  
  --color-primary: #FFFFFF;
  --color-primary-hover: #E6E6E6;
  --color-primary-active: #CCCCCC;
  --color-primary-glow: rgba(255, 255, 255, 0.3);
  --color-primary-rgb: 255, 255, 255;
  
  --color-secondary: #CCCCCC;
  --color-secondary-hover: #B3B3B3;
  --color-secondary-active: #999999;
  --color-secondary-glow: rgba(204, 204, 204, 0.3);
  
  --color-accent: #808080;
  --color-accent-glow: rgba(128, 128, 128, 0.3);
  
  /* ================================
     BORDER COLORS
     ================================ */
  
  --color-border: rgba(255, 255, 255, 0.15);
  --color-border-strong: rgba(255, 255, 255, 0.3);
  --color-border-light: rgba(255, 255, 255, 0.08);
  --color-border-focus: var(--color-primary);
  --color-border-glow: var(--color-primary-glow);
  
  /* ================================
     STATUS COLORS
     Grayscale variants
     ================================ */
  
  --color-error: #E6E6E6;
  --color-error-bg: rgba(230, 230, 230, 0.1);
  --color-error-border: rgba(230, 230, 230, 0.3);
  
  --color-warning: #CCCCCC;
  --color-warning-bg: rgba(204, 204, 204, 0.1);
  --color-warning-border: rgba(204, 204, 204, 0.3);
  
  --color-success: #FFFFFF;
  --color-success-bg: rgba(255, 255, 255, 0.1);
  --color-success-border: rgba(255, 255, 255, 0.3);
  
  --color-info: #B3B3B3;
  --color-info-bg: rgba(179, 179, 179, 0.1);
  --color-info-border: rgba(179, 179, 179, 0.3);
  
  /* LIVE indicator */
  --color-live: #FFFFFF;
  --color-live-glow: rgba(255, 255, 255, 0.5);
  
  /* ================================
     SHADOWS & EFFECTS
     Subtle monochrome shadows
     ================================ */
  
  --shadow-sm: 0 2px 4px rgba(255, 255, 255, 0.08);
  --shadow-md: 0 4px 8px rgba(255, 255, 255, 0.1);
  --shadow-lg: 0 8px 16px rgba(255, 255, 255, 0.12);
  --shadow-xl: 0 16px 32px rgba(255, 255, 255, 0.15);
  
  /* Subtle white glow */
  --glow-primary: 0 0 20px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 255, 255, 0.1);
  --glow-secondary: 0 0 20px rgba(204, 204, 204, 0.2), 0 0 40px rgba(204, 204, 204, 0.1);
  --glow-accent: 0 0 20px rgba(128, 128, 128, 0.2), 0 0 40px rgba(128, 128, 128, 0.1);
  --glow-live: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2);
  
  /* ================================
     FOCUS (A11Y)
     ================================ */
  
  --focus-ring-color: var(--color-primary);
  
  /* ================================
     SCROLLBAR
     ================================ */
  
  --scrollbar-track: var(--color-bg-secondary);
  --scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
  
  /* ================================
     SELECTION
     ================================ */
  
  --selection-bg: var(--color-primary);
  --selection-text: var(--color-text-inverse);
}