/* src/css/base/variables.css */
:root {
  /* Color Palette - Premium Deep Navy Dark Theme */
  --color-bg-dark: #000212; /* Vercel-like deep black/navy */
  --color-bg-surface: #0a0e17; /* Navy surface */
  --color-bg-elevated: #111827; /* Tailwind gray-900 equivalent */
  
  /* Primary & Accents (Electric Blue and vibrant cyan) */
  --color-primary: #0070f3; /* Vercel Blue */
  --color-primary-hover: #3291ff;
  --color-accent-1: #00dfd8; /* Electric Cyan */
  --color-accent-2: #8a2be2; /* Deep Purple for gradients */

  /* Typography Colors */
  --color-text-main: #ffffff;
  --color-text-muted: #888888;
  --color-text-dark: #111111;

  /* Borders and Dividers */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-hover: rgba(255, 255, 255, 0.2);

  /* Gradients */
  --gradient-primary: linear-gradient(180deg, var(--color-primary), #0056b3);
  --gradient-glow: linear-gradient(90deg, var(--color-primary), var(--color-accent-1));
  --gradient-dark: linear-gradient(180deg, var(--color-bg-surface) 0%, var(--color-bg-dark) 100%);
  
  /* Typography */
  --font-family-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Inter', system-ui, -apple-system, sans-serif; /* Stripe uses Inter for everything usually, keeping uniform */

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;

  /* Border Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions & Animation speeds */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;

  /* Z-Index Layers */
  --z-bg: -1;
  --z-normal: 1;
  --z-elevated: 10;
  --z-navbar: 100;
  --z-modal: 1000;
  --z-tooltip: 2000;
}