/* ============================================
   DESIGN TOKENS - Single Source of Truth
   NO page should redefine these values.
   ============================================ */

:root {
  /* Colors - Brand */
  --c-purple: #7c3aed;
  --c-purple-dark: #6d28d9;
  --c-teal: #00d4ff;
  --c-pink: #ec4899;
  --c-blue: #3b82f6;
  --c-cyan: #06b6d4;
  --c-yellow: #fbbf24;

  /* Colors - Text */
  --c-text: #1e293b;
  --c-text-secondary: #475569;
  --c-text-tertiary: #64748b;

  /* Colors - Backgrounds */
  --c-bg: #f8fafc;
  --c-bg-alt: #f1f5f9;
  --c-white: #ffffff;

  /* Colors - Semantic aliases */
  --c-primary: #7c3aed;
  --c-primary-dark: #6d28d9;
  --c-secondary: #06b6d4;
  --c-border: rgba(124, 58, 237, 0.15);
  --c-border-hover: rgba(124, 58, 237, 0.4);

  /* Glass Morphism */
  --glass: rgba(255, 255, 255, .95);
  --glass-dark: rgba(255, 255, 255, .85);
  --glass-border: rgba(124, 58, 237, .25);

  /* Spacing Scale (base 8px) */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 6rem;    /* 96px */

  /* Border Radius */
  --radius: 20px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow: 0 4px 30px rgba(124, 58, 237, .15);
  --shadow-hover: 0 12px 40px rgba(124, 58, 237, .25);
  --shadow-strong: 0 20px 60px rgba(124, 58, 237, .3);
  --shadow-sm: 0 2px 8px rgba(124, 58, 237, 0.08);
  --shadow-md: 0 4px 20px rgba(124, 58, 237, 0.12);
  --shadow-lg: 0 8px 40px rgba(124, 58, 237, 0.15);
  --shadow-xl: 0 16px 60px rgba(124, 58, 237, 0.2);

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