/**
 * CSS Custom Properties - Design Tokens
 * SafePassage 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);
}