/* sites/privacytool.ai/theme.css
   Site-specific theme: Privacy Tool AI
   Theme: Privacy (Indigo/Purple) - Confidentiality and protection
*/

:root {
  /* Primary brand colors - Privacy Theme */
  --site-primary: #6366f1;       /* Indigo - main brand color */
  --site-primary-dark: #4f46e5;  /* Darker indigo for hover states */
  --site-primary-light: #eef2ff; /* Very light indigo background */
  --site-primary-lighter: #e0e7ff; /* Light indigo for cards */
  
  /* Secondary/Accent colors */
  --site-accent: #8b5cf6;        /* Purple accent - protection theme */
  --site-accent-dark: #7c3aed;   /* Darker purple */
  --site-accent-light: #f5f3ff;  /* Light purple background */
  
  /* Status colors */
  --site-safe: #22c55e;          /* Green for safe/verified */
  --site-warning: #f59e0b;       /* Amber for warnings */
  --site-danger: #ef4444;        /* Red for dangers */
  
  /* Text colors - optimized for light mode */
  --text-primary: #0f172a;       /* Slate 900 - excellent contrast */
  --text-secondary: #475569;     /* Slate 600 - readable secondary text */
  --text-tertiary: #64748b;      /* Slate 500 - muted text */
  --text-inverse: #ffffff;
  
  /* Backgrounds - light mode */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;       /* Slate 50 - subtle background */
  --bg-tertiary: #f1f5f9;        /* Slate 100 */
  --bg-dark: #0f172a;            /* For footer and dark sections */
  
  /* Dark mode design tokens (single source of truth) */
  --dm-text-primary: #f1f5f9;      /* Slate 100 */
  --dm-text-secondary: #cbd5e1;    /* Slate 300 */
  --dm-text-tertiary: #94a3b8;     /* Slate 400 */
  --dm-text-inverse: #0f172a;
  
  --dm-bg-primary: #0f172a;        /* Slate 900 */
  --dm-bg-secondary: #1e293b;      /* Slate 800 */
  --dm-bg-tertiary: #334155;       /* Slate 700 */
  --dm-bg-dark: #1f2937;           /* Gray 800 for footer */
  
  --dm-site-primary-light: #312e81; /* Darker for backgrounds */
  --dm-site-accent-light: #4c1d95;  /* Darker for backgrounds */
  
  /* Legacy support */
  --primary: var(--site-primary);
  --accent: #6366f1;
  --accent-2: color-mix(in srgb, #6366f1 55%, #8b5cf6);
  
  /* Header height for fixed positioning
     Calculated as: 1rem padding-top + 1rem padding-bottom + ~38px content height ≈ 70px
     Used to add body padding to prevent content from being hidden under fixed header */
  --header-height: 70px;
}

/* Add padding to body to account for fixed header */
body {
  padding-top: var(--header-height);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    /* Text colors for dark mode - higher contrast */
    --text-primary: var(--dm-text-primary);
    --text-secondary: var(--dm-text-secondary);
    --text-tertiary: var(--dm-text-tertiary);
    --text-inverse: var(--dm-text-inverse);
    
    /* Backgrounds for dark mode */
    --bg-primary: var(--dm-bg-primary);
    --bg-secondary: var(--dm-bg-secondary);
    --bg-tertiary: var(--dm-bg-tertiary);
    --bg-dark: var(--dm-bg-dark);
    
    /* Adjusted brand colors for better visibility in dark mode */
    --site-primary-light: var(--dm-site-primary-light);
    --site-accent-light: var(--dm-site-accent-light);
  }
}

html.dark,
html.dark-mode,
html[data-theme="dark"] {
  /* Text colors for dark mode */
  --text-primary: var(--dm-text-primary);
  --text-secondary: var(--dm-text-secondary);
  --text-tertiary: var(--dm-text-tertiary);
  --text-inverse: var(--dm-text-inverse);
  
  /* Backgrounds for dark mode */
  --bg-primary: var(--dm-bg-primary);
  --bg-secondary: var(--dm-bg-secondary);
  --bg-tertiary: var(--dm-bg-tertiary);
  --bg-dark: var(--dm-bg-dark);
  
  /* Adjusted brand colors */
  --site-primary-light: var(--dm-site-primary-light);
  --site-accent-light: var(--dm-site-accent-light);
}

html[data-theme="light"] {
  color-scheme: light;
  
  /* Text colors for light mode */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-inverse: #ffffff;
  
  /* Backgrounds for light mode */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-dark: #0f172a;
  
  /* Adjusted brand colors */
  --site-primary-light: #eef2ff;
  --site-accent-light: #f5f3ff;
}

/* Footer override for privacy theme */
.footer {
  background: linear-gradient(180deg, #312e81 0%, #1e1b4b 100%);
}

html.dark .footer,
html.dark-mode .footer,
html[data-theme="dark"] .footer {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

/* Site branding */
.site-brand {
  --brand-color: var(--site-primary);
}

/* Hero section with privacy theme */
.hero--privacy,
.hero-standard[data-theme="privacy"] {
  background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-accent) 100%);
  color: var(--text-inverse);
}

/* Feature cards with privacy theme accent */
.feature-card--privacy {
  border-left: 4px solid var(--site-primary);
  transition: all 0.3s ease;
}

.feature-card--privacy:hover {
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
  transform: translateY(-2px);
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

/* Mobile (≤768px) — covers both small mobile and tablet */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
  }
}

/* TV / Large screens (≥1920px) */
@media (min-width: 1920px) {
  :root {
    --header-height: 80px;
  }

  .hero--privacy,
  .hero-standard[data-theme="privacy"] {
    padding: 6rem 2rem;
  }

  .feature-card--privacy {
    padding: 2.5rem;
  }
}