/**
 * CSS Custom Properties - Design Tokens
 * Demo Variables
 */

:root {
  /* Color Palette - Blues */
  --color-blue-bg: rgba(30, 58, 138, 0.2);
  --color-blue-border: rgba(30, 64, 175, 0.5);
  --color-blue-text: #60A5FA;
  --color-blue-text-light: #93BBFC;
  --color-blue-solid: #2563EB;
  --color-blue-solid-hover: #1D4ED8;

  /* Color Palette - Greens */
  --color-green-bg: rgba(20, 83, 45, 0.2);
  --color-green-border: rgba(22, 101, 52, 0.5);
  --color-green-text: #4ADE80;
  --color-green-text-light: #86EFAC;

  /* Color Palette - Grays */
  --color-gray-100: #F3F4F6;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #2a2f38;
  --color-gray-700: #1e2329;
  --color-gray-800: #1a1f26;
  --color-gray-900: #0F1419;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

  /* Spacing Scale */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Other */
  --white: #ffffff;
  --accent-gradient: linear-gradient(135deg, #2563EB, #60A5FA);
}

/**
 * Light Mode Theme (PrivateAV)
 * Applied when body has .theme-light class
 */
body.theme-light {
  /* Color Palette - Teal/Cyan (PrivateAV brand) */
  --color-blue-bg: rgba(8, 145, 178, 0.1);
  --color-blue-border: rgba(8, 145, 178, 0.3);
  --color-blue-text: #0891b2;
  --color-blue-text-light: #0e7490;
  --color-blue-solid: #0891b2;
  --color-blue-solid-hover: #0e7490;

  /* Color Palette - Greens */
  --color-green-bg: rgba(22, 163, 74, 0.1);
  --color-green-border: rgba(22, 163, 74, 0.3);
  --color-green-text: #16a34a;
  --color-green-text-light: #15803d;

  /* Color Palette - Grays (Inverted for light mode) */
  --color-gray-100: #1f2937;      /* Dark text (was light) */
  --color-gray-400: #6b7280;      /* Muted text */
  --color-gray-500: #9ca3af;      /* Secondary text */
  --color-gray-600: #e5e7eb;      /* Light borders */
  --color-gray-700: #f3f4f6;      /* Card backgrounds */
  --color-gray-800: #f9fafb;      /* Lighter backgrounds */
  --color-gray-900: #ffffff;      /* Page background */

  /* Shadows (lighter for light mode) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Other */
  --white: #ffffff;
  --accent-gradient: linear-gradient(135deg, #0891b2, #22d3ee);
}