/**
 * Design System Variables
 * Theme: Privacy, AI, Trust, Security
 * 
 * Color Philosophy:
 * - Privacy: Deep blues and purples for confidentiality
 * - AI: Electric blues and teals for technology
 * - Trust: Warm greens for reliability
 * - Security: Strong dark colors with accent highlights
 */

:root {
  color-scheme: light dark;
  /* === Brand Colors === */
  --brand-primary: #2563eb;        /* Trust blue */
  --brand-secondary: #7c3aed;      /* Privacy purple */
  --brand-accent: #10b981;         /* Security green */
  --brand-ai: #06b6d4;             /* AI cyan */
  
  /* === Semantic Colors === */
  /* Privacy Theme - Indigo/Purple for confidentiality and protection */
  --privacy-primary: #6366f1;      /* Indigo - confidentiality */
  --privacy-secondary: #8b5cf6;    /* Purple - protection */
  --privacy-light: #ede9fe;        /* Light purple background */
  --privacy-dark: #4c1d95;         /* Deep purple */
  --privacy-darker: #2e1065;       /* Even deeper purple for dark mode */
  
  /* AI Theme - Cyan/Teal/Purple for technology and intelligence */
  --ai-primary: #06b6d4;           /* Cyan - technology */
  --ai-secondary: #8b5cf6;         /* Purple - AI intelligence */
  --ai-accent: #ec4899;            /* Pink - futuristic accent */
  --ai-light: #ecfeff;             /* Light cyan background */
  --ai-dark: #164e63;              /* Deep cyan */
  --ai-darker: #0c2a35;            /* Even deeper cyan for dark mode */
  
  /* Trust/Security Theme - Green/Emerald for reliability and safety */
  --trust-primary: #10b981;        /* Green - reliability */
  --trust-secondary: #059669;      /* Dark green - stability */
  --trust-light: #d1fae5;          /* Light green background */
  --trust-dark: #065f46;           /* Deep green */
  --trust-darker: #022c22;         /* Even deeper green for dark mode */
  
  /* Danger/Warning Theme - Red/Orange for alerts */
  --danger-primary: #ef4444;       /* Red - alert */
  --danger-secondary: #dc2626;     /* Dark red - warning */
  --danger-light: #fee2e2;         /* Light red background */
  --danger-dark: #991b1b;          /* Deep red */
  --warning-primary: #f59e0b;      /* Orange/Amber - caution */
  --warning-dark: #d97706;         /* Dark amber */
  
  /* Legacy aliases for backwards compatibility */
  --security-primary: var(--danger-primary);
  --security-secondary: var(--danger-secondary);
  --security-light: var(--danger-light);
  --security-dark: var(--danger-dark);
  --security-safe: var(--trust-primary);
  
  /* === Neutral Colors === */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  
  /* === Text Colors === */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-inverse: #ffffff;
  --text-link: var(--brand-primary);
  --text-link-hover: var(--brand-secondary);
  
  /* === Background Colors === */
  --bg-primary: #ffffff;
  --bg-secondary: var(--neutral-50);
  --bg-tertiary: var(--neutral-100);
  --bg-dark: var(--neutral-900);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* === Border Colors === */
  --border-primary: var(--neutral-200);
  --border-secondary: var(--neutral-300);
  --border-focus: var(--brand-primary);
  
  /* === Spacing === */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  --spacing-4xl: 6rem;      /* 96px */
  
  /* === Typography === */
  /* Font Families */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", 
               Consolas, "Courier New", monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg: 1.125rem;      /* 18px */
  --text-xl: 1.25rem;       /* 20px */
  --text-2xl: 1.5rem;       /* 24px */
  --text-3xl: 1.875rem;     /* 30px */
  --text-4xl: 2.25rem;      /* 36px */
  --text-5xl: 3rem;         /* 48px */
  --text-6xl: 3.75rem;      /* 60px */
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* === Shadows === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
               0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
               0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
               0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* === Border Radius === */
  --radius-sm: 0.125rem;    /* 2px */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-full: 9999px;    /* Fully rounded */
  
  /* === Transitions === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* === Z-index === */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* === Breakpoints (for reference in JS) === */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --breakpoint-tv: 1920px;
  
  /* === Max Widths === */
  --max-width-xs: 20rem;     /* 320px */
  --max-width-sm: 24rem;     /* 384px */
  --max-width-md: 28rem;     /* 448px */
  --max-width-lg: 32rem;     /* 512px */
  --max-width-xl: 36rem;     /* 576px */
  --max-width-2xl: 42rem;    /* 672px */
  --max-width-3xl: 48rem;    /* 768px */
  --max-width-4xl: 56rem;    /* 896px */
  --max-width-5xl: 64rem;    /* 1024px */
  --max-width-6xl: 72rem;    /* 1152px */
  --max-width-7xl: 80rem;    /* 1280px */
  --max-width-tv: 120rem;    /* Max content width for TV/large screens (1920px at 16px base) */
  --max-width-full: 100%;
  
  /* === Accessibility === */
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
  --focus-ring-offset: 2px;
}

/* === Dark Mode Support === */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Text colors for dark mode */
    --text-primary: var(--neutral-50);
    --text-secondary: var(--neutral-300);
    --text-tertiary: var(--neutral-400);
    --text-inverse: var(--neutral-900);
    --text-link: #60a5fa; /* Lighter blue for better visibility */
    --text-link-hover: #93c5fd;
    
    /* Background colors for dark mode */
    --bg-primary: #0f172a;           /* Slate 900 - deeper, richer dark */
    --bg-secondary: #1e293b;         /* Slate 800 */
    --bg-tertiary: #334155;          /* Slate 700 */
    --bg-dark: var(--neutral-800);   /* Footer/dark sections */
    --bg-overlay: rgba(15, 23, 42, 0.8);
    
    /* Border colors for dark mode */
    --border-primary: var(--neutral-700);
    --border-secondary: var(--neutral-600);
    
    /* Adjusted theme colors for dark mode - brighter for visibility */
    --privacy-light: #312e81;        /* Darker background, brighter text */
    --ai-light: #164e63;             /* Darker background */
    --trust-light: #065f46;          /* Darker background */
    --danger-light: #7f1d1d;         /* Darker background */
  }
}

/* Manual Dark Mode Toggle Support */
html.dark,
html.dark-mode,
html[data-theme="dark"] {
  color-scheme: dark;
  
  /* Text colors for dark mode */
  --text-primary: var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-tertiary: var(--neutral-400);
  --text-inverse: var(--neutral-900);
  --text-link: #60a5fa;
  --text-link-hover: #93c5fd;
  
  /* Background colors for dark mode */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-dark: var(--neutral-800);
  --bg-overlay: rgba(15, 23, 42, 0.8);
  
  /* Border colors for dark mode */
  --border-primary: var(--neutral-700);
  --border-secondary: var(--neutral-600);
  
  /* Adjusted theme colors for dark mode */
  --privacy-light: #312e81;
  --ai-light: #164e63;
  --trust-light: #065f46;
  --danger-light: #7f1d1d;
}

html[data-theme="light"] {
  color-scheme: light;
  
  /* Text colors for light mode */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-inverse: #ffffff;
  --text-link: var(--brand-primary);
  --text-link-hover: var(--brand-secondary);
  
  /* Background colors for light mode */
  --bg-primary: #ffffff;
  --bg-secondary: var(--neutral-50);
  --bg-tertiary: var(--neutral-100);
  --bg-dark: var(--neutral-900);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Border colors for light mode */
  --border-primary: var(--neutral-200);
  --border-secondary: var(--neutral-300);
  
  /* Theme colors for light mode */
  --privacy-light: #ede9fe;
  --ai-light: #ecfeff;
  --trust-light: #d1fae5;
  --danger-light: #fee2e2;
}

/* === High Contrast Mode (prefers-contrast: more) === */
@media (prefers-contrast: more) {
  :root {
    --text-primary: #000000;
    --text-secondary: #1a1a1a;
    --text-tertiary: #333333;
    --text-link: #0000cc;
    --text-link-hover: #000080;
    --border-primary: #000000;
    --border-secondary: #000000;
    --border-focus: #000000;
    --bg-primary: #ffffff;
    --bg-secondary: #f0f0f0;
    --bg-tertiary: #e0e0e0;
    --focus-ring: 0 0 0 3px #000000;
    --focus-ring-offset: 3px;
  }
}

/* === Windows High Contrast Mode (forced-colors) === */
@media (forced-colors: active) {
  :root {
    --border-focus: ButtonText;
    --focus-ring: 0 0 0 2px ButtonText;
  }

  .btn,
  .form-input,
  .form-textarea,
  .form-select,
  .form-checkbox,
  .form-radio {
    forced-color-adjust: none;
    border: 1px solid ButtonText;
  }

  a:focus,
  button:focus,
  :focus-visible {
    outline: 2px solid ButtonText;
    outline-offset: 2px;
  }
}