/* CSS Custom Properties - EVEA Design System */

:root {
  /* Colors - Brand colors from logo */
  --color-bg-primary: #0d1a1a;
  --color-bg-gradient-start: #1a2a2a;
  --color-bg-gradient-mid: #0d1a1a;
  --color-bg-gradient-end: #1a1f1a;
  --color-accent-teal: #58918e;
  --color-accent-olive: #788c68;
  --color-accent-grey: #4b6061;

  /* Glass Effect */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-hover: rgba(88, 145, 142, 0.5);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.5);

  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Sizes */
  --font-size-h1: 48px;
  --font-size-h1-mobile: 32px;
  --font-size-h2: 32px;
  --font-size-h2-mobile: 24px;
  --font-size-h3: 24px;
  --font-size-h3-mobile: 20px;
  --font-size-body: 16px;
  --font-size-small: 14px;

  /* Spacing */
  --spacing-unit: 8px;
  --section-padding: 80px;
  --section-padding-mobile: 48px;
  --card-padding: 32px;
  --card-padding-mobile: 24px;

  /* Effects */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;

  /* Shadows */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 40px rgba(88, 145, 142, 0.2);
  --shadow-button: 0 4px 20px rgba(88, 145, 142, 0.3);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}