/**
 * SEESL Website - CSS Variables
 * Contains all design tokens used throughout the site
 */

 :root {
    /* Colors - Light Theme */
    --primary: #0056b3;       /* Blue - primary brand color */
    --primary-hover: #004494; /* Darker blue for hover states */
    --secondary: #e63946;     /* Red - accent color */
    --secondary-hover: #d32836; /* Darker red for hover states */
    
    /* Text colors */
    --text: #333333;         /* Dark gray for main text */
    --text-light: #666666;   /* Medium gray for secondary text */
    
    /* Background colors */
    --background: #ffffff;    /* White for main background */
    --background-alt: #f8f9fa; /* Light gray for alternating sections */
    
    /* Other utility colors */
    --border: #e5e7eb;       /* Light gray for borders */
    --success: #10b981;      /* Green for success messages */
    --warning: #f59e0b;      /* Orange for warnings */
    --error: #ef4444;        /* Red for errors */
    
    /* Component colors */
    --header: #0056b3;       /* Blue header background */
    --footer: #0056b3;       /* Blue footer background */
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
    
    /* Typography */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    
    /* Borders */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    
    /* 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);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Container */
    --container-max-width: 1200px;
    --container-padding: 1rem;
  }
  
  /* Dark Theme */
  [data-theme="dark"] {
    --primary: #1e88e5;
    --primary-hover: #1976d2;
    --secondary: #f44336;
    --secondary-hover: #e53935;
    --text: #f1f5f9;
    --text-light: #cbd5e1;
    --background: #0f172a;
    --background-alt: #1e293b;
    --border: #334155;
    --success: #10b981;
    --warning: #fbbf24;
    --error: #f87171;
    --header: #1e293b;
    --footer: #1e293b;
  }