@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Syne:wght@400;600;700;800&display=swap');

:root {
  /* Colors */
  --color-dark: #202028;
  --color-black: #1a1a20;
  --color-light: #f5f5f7;
  --color-white: #ffffff;

  --color-red: #d32f2f;
  --color-red-dark: #b71c1c;
  --color-red-glow: rgba(211, 47, 47, 0.4);

  --color-blue: #1976d2;
  --color-blue-dark: #0d47a1;
  --color-blue-glow: rgba(25, 118, 210, 0.4);

  --text-primary: var(--color-white);
  --text-secondary: rgba(255, 255, 255, 0.7);

  --bg-gradient: linear-gradient(135deg, var(--color-dark) 0%, var(--color-black) 100%);
  --bg-glass: rgba(10, 10, 12, 0.65);

  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Syne', sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2.5rem;
  --space-lg: 5rem;
  --space-xl: 10rem;

  /* Radius & Shadows */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}