/* ==========================================================================
   DreamIT ImpactOS - Design System Tokens
   Design Inspiration: VaultEx by Emote Agency
   Editorial Fintech / Modern Web3 / Impact Intelligence
   ========================================================================== */

:root {
  /* Core VaultEx Color Palette */
  --background: #F3F2F4;
  --bg-primary: #F3F2F4;
  --bg-secondary: #E9E8EC;
  --bg-tertiary: #DFDDE4;
  
  /* Primary Dark */
  --foreground: #050506;
  --text-primary: #050506;
  --text-secondary: #59585E;
  --text-muted: #7E7C85;
  --text-inverse: #F3F2F4;
  
  /* Neutral Surfaces */
  --surface: #FFFFFF;
  --surface-subtle: #FAF9FB;
  --surface-elevated: #FFFFFF;
  --surface-dark: #050506;
  --surface-dark-card: #121215;
  
  /* VaultEx Signature Accents */
  --sage: #B9D1C4;
  --lilac: #E17EE3;
  --green: #5CB44C;
  --lime: #C7CB46;
  --pink: #CC97B7;
  
  /* Soft Accent Tints (for tags, subtle backgrounds) */
  --sage-soft: rgba(185, 209, 196, 0.25);
  --lime-soft: rgba(199, 203, 70, 0.22);
  --lilac-soft: rgba(225, 126, 227, 0.18);
  --green-soft: rgba(92, 180, 76, 0.18);
  --pink-soft: rgba(204, 151, 183, 0.20);
  
  /* Gradients (Used Sparingly per VaultEx design rule) */
  --grad-lime-sage: linear-gradient(135deg, #B9D1C4 0%, #C7CB46 100%);
  --grad-lilac-pink: linear-gradient(135deg, #E17EE3 0%, #CC97B7 100%);
  --grad-green-lime: linear-gradient(135deg, #5CB44C 0%, #C7CB46 100%);
  --grad-dark: linear-gradient(180deg, #121216 0%, #050506 100%);
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #F6F5F8 100%);

  /* Borders */
  --border-subtle: rgba(5, 5, 6, 0.06);
  --border: rgba(5, 5, 6, 0.10);
  --border-strong: rgba(5, 5, 6, 0.18);
  --border-dark: rgba(255, 255, 255, 0.12);

  /* Status Colors (Audited, non-alarmist) */
  --success: #2E7D32;
  --success-soft: rgba(92, 180, 76, 0.16);
  --warning: #B45309;
  --warning-soft: rgba(245, 158, 11, 0.14);
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.12);
  --info: #0284C7;
  --info-soft: rgba(2, 132, 199, 0.12);

  /* Typography Scale */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* 8px Spacing Foundation */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-40: 160px;

  /* Radius Tokens */
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-hero: 44px;
  --radius-full: 999px;
  --radius-pill: 999px;

  /* Shadows (Soft & Subtle) */
  --shadow-sm: 0 2px 8px rgba(5, 5, 6, 0.04);
  --shadow-md: 0 10px 30px rgba(5, 5, 6, 0.05);
  --shadow-lg: 0 16px 40px rgba(5, 5, 6, 0.07);
  --shadow-xl: 0 24px 60px rgba(5, 5, 6, 0.09);
  --shadow-card: 0 10px 40px rgba(5, 5, 6, 0.06);

  /* Layout */
  --container-max: 1420px;
  --container-editorial: 1280px;
  --header-height: 76px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-smooth: 450ms cubic-bezier(0.22, 1, 0.36, 1);
}