/* Color Palette - Material Design Inspired */
:root {
  /* Default Theme: Indigo */
  --theme: "indigo";

  /* Primary colors */
  --primary-dark: #303f9f;
  --primary: #3f51b5;
  --primary-light: #7986cb;
  --primary-lighter: #c5cae9;
  --primary-lightest: #e8eaf6;
  --secondary-dark: #00695c;
  --secondary: #009688;
  --secondary-light: #4db6ac;
  --secondary-lighter: #b2dfdb;
  --secondary-lightest: #e0f2f1;
  --accent: #ffc107; /* Amber accent */
  --accent-dark: #ff8f00;
  --accent-light: #ffecb3;

  /* Common accent colors */
  --accent-amber: #ffc107;
  --accent-pink: #e91e63;
  --accent-blue: #2196f3;
  --accent-red: #f44336;
  --accent-green: #4caf50;
  --accent-purple: #9c27b0;
  --accent-orange: #ff9800;

  /* Matrix theme colors */
  --matrix-green: #00ff00;
  --matrix-green-dark: #00cc00;
  --matrix-green-light: #66ff66;
  --matrix-bg: #161922;
  --matrix-bg-light: #1e2230;
  --matrix-bg-dark: #0d0f14;

  /* Dark theme colors */
  --dark-bg-1: #121212;
  --dark-bg-2: #1e1e1e;
  --dark-bg-3: #2d2d2d;
  --dark-surface: #333333;
  --dark-surface-light: #424242;
  --dark-surface-lighter: #616161;

  /* Neutral colors */
  --white: #ffffff;
  --light-gray-1: #f8f9fa;
  --light-gray-2: #e9ecef;
  --light-gray-3: #dee2e6;
  --gray-1: #d0d0d0;
  --gray-2: #bdc3c7;
  --gray-3: #7f8c8d;
  --dark-gray: #4a4a4a;
  --black: #000000;

  /* Typography */
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3rem;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.2);

  /* Material Design Elevation */
  --elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  --elevation-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  --elevation-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  --elevation-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Glass Effect Variables */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-dark: rgba(0, 0, 0, 0.2);
  --glass-bg-light: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-border-dark: rgba(0, 0, 0, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --glass-blur: blur(8px);
  --glass-backdrop-filter: blur(8px) saturate(180%);

  /* Modern Gradients */
  --gradient-primary: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  --gradient-secondary: linear-gradient(135deg, var(--secondary-dark), var(--secondary-light));
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--primary-light));
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  --gradient-dark-glass: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  --gradient-matrix: linear-gradient(135deg, var(--matrix-bg-dark), var(--matrix-bg-light));
  --gradient-rainbow: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4, #fbc2eb);

  /* Z-index layers */
  --z-below: -1;
  --z-normal: 1;
  --z-above: 10;
  --z-header: 100;
  --z-modal: 1000;
  --z-tooltip: 1500;
  --z-max: 9999;

  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}