@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: #f5f5f7;
  --color-black: #ffffff;
  --color-light: #202028;
  --color-white: #1a1a20;

  --color-red: #00b4d8;
  --color-red-dark: #0096c7;
  --color-red-glow: rgba(0, 180, 216, 0.4);

  --color-blue: #023e8a;
  --color-blue-dark: #03045e;
  --color-blue-glow: rgba(2, 62, 138, 0.4);

  --text-primary: #1a1a20;
  --text-secondary: rgba(0, 0, 0, 0.7);

  --bg-gradient: linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%);
  --bg-glass: rgba(255, 255, 255, 0.85);

  /* 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);
}