/* ============================================
   CSS VARIABLES - Design Tokens
   ============================================ */

:root {
  /* AI-themed color palette */
  --primary-gradient: linear-gradient(45deg, #00d4ff, #0066ff);
  --secondary-gradient: linear-gradient(135deg, #667eea, #764ba2);
  --accent-gradient: linear-gradient(45deg, #f093fb, #f5576c);
  --neural-gradient: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 50%,
    #f093fb 100%
  );

  /* Semantic colors */
  --bg-primary: #0a0a0f;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #16213e;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.6);
  --border-color: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.05);

  /* Card variables */
  --card-bg-modern: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  --card-border-modern: rgba(255, 255, 255, 0.12);
  --card-hover-bg: linear-gradient(
    135deg,
    rgba(0, 212, 255, 0.08) 0%,
    rgba(102, 126, 234, 0.05) 100%
  );
  --card-shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.1);
  --card-shadow-hover: 0 16px 40px rgba(0, 212, 255, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.2);
  --card-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --card-padding-modern: 2rem;
  --card-gap-modern: 1.5rem;

  /* Typography */
  --font-family-base: "Baseltica", "Inter", sans-serif;
  --font-family: var(--font-family-base);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 2.5rem;
  --spacing-3xl: 3rem;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}