/* Privy Website - Theme Variables System */
/* Matches the Chrome extension design system exactly */

:root {
  /* Light Theme (Default) - Matches extension popup.css */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-inverted: #ffffff;
  
  /* Header & Branding */
  --header-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --logo-text: #ffffff;
  --tagline-text: rgba(255, 255, 255, 0.9);
  
  /* Borders & Dividers */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-tertiary: #f3f4f6;
  
  /* Interactive Elements */
  --btn-primary-bg: #3b82f6;
  --btn-primary-hover: #2563eb;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #f9fafb;
  --btn-secondary-hover: #f3f4f6;
  --btn-secondary-text: #374151;
  --btn-outline-border: #d1d5db;
  --btn-outline-hover: #f9fafb;
  
  /* Status & Risk Colors */
  --risk-high: #dc2626;
  --risk-medium: #d97706;
  --risk-low: #16a34a;
  --status-safe: #10b981;
  --status-warning: #f59e0b;
  --status-danger: #ef4444;
  
  /* Pro Features */
  --pro-badge-bg: #fbbf24;
  --pro-badge-text: #92400e;
  --pro-shimmer: rgba(255, 255, 255, 0.3);
  
  /* Cards & Containers */
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --card-hover-shadow: rgba(0, 0, 0, 0.15);
  
  /* Website-specific variables */
  --hero-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --section-spacing: 4rem;
  --container-max-width: 1200px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --transition: all 0.2s ease;
  
  /* Typography Scale */
  --font-xs: 0.75rem;    /* 12px */
  --font-sm: 0.875rem;   /* 14px */
  --font-base: 1rem;     /* 16px */
  --font-lg: 1.125rem;   /* 18px */
  --font-xl: 1.25rem;    /* 20px */
  --font-2xl: 1.5rem;    /* 24px */
  --font-3xl: 1.875rem;  /* 30px */
  --font-4xl: 2.25rem;   /* 36px */
  --font-5xl: 3rem;      /* 48px */
  
  /* Spacing Scale (8px grid) */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  
  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Dark Theme - For future implementation */
.dark-theme {
  --bg-primary: #1e293b;
  --bg-secondary: #111827;
  --bg-tertiary: #0d1521;
  --text-primary: #f4f5f7;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --text-inverted: #1e293b;
  
  --header-gradient: linear-gradient(135deg, #4b5563 0%, #1e293b 100%);
  --logo-text: #f4f5f7;
  --tagline-text: rgba(244, 245, 247, 0.8);
  
  --border-primary: #475568;
  --border-secondary: #6b7280;
  --border-tertiary: #374151;
  
  --btn-primary-bg: #5c5eef;
  --btn-primary-hover: #4f46e5;
  --btn-secondary-bg: #374151;
  --btn-secondary-hover: #4b5563;
  --btn-secondary-text: #f4f5f7;
  --btn-outline-border: #6b7280;
  --btn-outline-hover: #475568;
  
  --card-bg: #475568;
  --card-border: #475568;
  --card-shadow: rgba(0, 0, 0, 0.35);
  --card-hover-shadow: rgba(0, 0, 0, 0.5);
  
  --hero-gradient: linear-gradient(135deg, #4b5563 0%, #1e293b 100%);
}

/* Privy Theme (Earthy Brown) - For future implementation */
.privy-theme {
  --bg-primary: #6b584c;
  --bg-secondary: #4f4237;
  --bg-tertiary: #3b3027;
  --text-primary: #fdf6e3;
  --text-secondary: #e8e3dd;
  --text-tertiary: #cfc7c0;
  --text-inverted: #6b584c;
  
  --header-gradient: linear-gradient(135deg, #b56e07 0%, #8a3e0b 100%);
  --logo-text: #fdf6e3;
  --tagline-text: rgba(253, 246, 227, 0.9);
  
  --border-primary: #a2938a;
  --border-secondary: #8f7d72;
  --border-tertiary: #6b584c;
  
  --btn-primary-bg: #b56e07;
  --btn-primary-hover: #92400e;
  --btn-secondary-bg: #a2938a;
  --btn-secondary-hover: #8f7d72;
  --btn-secondary-text: #3b3027;
  --btn-outline-border: #a2938a;
  --btn-outline-hover: #8f7d72;
  
  --card-bg: #8f7d72;
  --card-border: #6b584c;
  --card-shadow: rgba(59, 48, 39, 0.35);
  --card-hover-shadow: rgba(59, 48, 39, 0.5);
  
  --hero-gradient: linear-gradient(135deg, #b56e07 0%, #8a3e0b 100%);
}