/* ==========================================================================
   WOVEN DATA DESIGN SYSTEM - VARIABLES & TOKENS
   ========================================================================== */

:root {
  /* Color Palette */
  --color-primary: #D47A92;
  --color-primary-hover: #DF92A7;
  --color-primary-light: rgba(212, 122, 146, 0.12);
  --color-accent-purple: #9B51E0;
  --color-accent-green: #00D084;
  --color-accent-cyan: #0693E3;
  --color-accent-amber: #FCB900;
  
  --color-dark-bg: #1E141E;
  --color-dark-surface: #261B26;
  --color-dark-card: #2E202E;
  --color-dark-border: rgba(255, 255, 255, 0.12);
  
  --color-light-bg: #F9F7F9;
  --color-light-surface: #FFFFFF;
  --color-light-border: #E2DEE2;
  
  --color-title: #1E141E;
  --color-title-dark: #FFFFFF;
  --color-body: #4A454A;
  --color-body-dark: #D1CDD1;
  --color-meta: #807880;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #D47A92 0%, #DF92A7 50%, #9B51E0 100%);
  --gradient-dark: linear-gradient(180deg, #1E141E 0%, #120B12 100%);
  --gradient-card-dark: linear-gradient(145deg, rgba(38, 27, 38, 0.8) 0%, rgba(30, 20, 30, 0.9) 100%);
  --gradient-cyan-purple: linear-gradient(135deg, #0693E3 0%, #9B51E0 100%);

  /* Typography */
  --font-heading: 'Onest', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Container & Spacing */
  --container-max-width: 1290px;
  --container-padding: 24px;
  
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;
  --spacing-xxl: 96px;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-full: 9999px;
  
  /* Transitions & Shadows */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 35px rgba(212, 122, 146, 0.35);
  
  --z-header: 1000;
  --z-dropdown: 1050;
  --z-drawer: 1100;
  --z-modal: 1200;
}