/* CSS Custom Properties - FlipQuiz Variables */
:root {
  /* Opacity variants */
  --white-30: rgba(255, 255, 255, 0.3);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-10: rgba(255, 255, 255, 0.1);
  --black-35: rgba(0, 0, 0, 0.35);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-10: rgba(0, 0, 0, 0.1);

  /* Primary colors */
  --primary-blue: #1565c0;
  --primary-purple: #667eea;
  --secondary-purple: #764ba2;

  /* Gradients */
  --main-gradient: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 25%,
    #f093fb 50%,
    #f5576c 75%,
    #4facfe 100%
  );
  --glass-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(247, 250, 252, 0.95) 100%
  );
  --monitor-gradient: linear-gradient(
    135deg,
    #1565c0 0%,
    #42a5f5 50%,
    #29b6f6 100%
  );

  /* Spacing */
  --border-radius-sm: 8px;
  --border-radius-md: 15px;
  --border-radius-lg: 25px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 30px;

  /* Shadows */
  --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 12px 50px rgba(0, 0, 0, 0.4);
}