/* ==============================================
   CareAbout Design System - Design Tokens
   Phase 1 Foundation Implementation
   ITCSS Layer: Settings
   ============================================== */

:root {
  /* ===================
     COLOR SYSTEM 
     =================== */
  
  /* Primary Brand Colors */
  --color-primary-navy: #1B365D;          /* Primary brand, buttons, headers */
  --color-primary-blue: #2E5F8A;          /* Interactive elements, links */
  --color-success-green: #2D5A3B;         /* Success states, positive outcomes */
  --color-accent-gold: #B8860B;           /* Important information, premium features */
  
  /* Text Hierarchy - WCAG AAA Compliant */
  --color-text-primary: #1A1A1A;          /* Main content (16.21:1 contrast) */
  --color-text-secondary: #444444;         /* Supporting text (9.73:1 contrast) */
  --color-text-tertiary: #666666;          /* Helper text (5.74:1 contrast) */
  --color-text-light: #888888;             /* Muted content (3.54:1 contrast) */
  
  /* Background System */
  --color-bg-primary: #FFFFFF;             /* Main backgrounds */
  --color-bg-secondary: #F8F9FA;           /* Alternate sections */
  --color-bg-tertiary: #F2F4F6;            /* Cards and containers */
  --color-bg-accent: #F5F7F9;              /* Highlighted areas */
  
  /* Interactive States */
  --color-interactive-primary: var(--color-primary-navy);
  --color-interactive-hover: #0F2A4A;       /* Hover states */
  --color-interactive-focus: #4A90B8;       /* Focus indicators */
  --color-interactive-active: #092341;      /* Active states */
  --color-interactive-disabled: #CCCCCC;    /* Disabled elements */
  
  /* Status Colors */
  --color-success: var(--color-success-green);  /* Success messages */
  --color-warning: #8B4513;                     /* Warnings and important info */
  --color-error: #8B0000;                       /* Error states */
  --color-info: var(--color-primary-blue);      /* Informational messages */
  
  /* Border System */
  --color-border-primary: #E0E0E0;         /* Default borders */
  --color-border-secondary: #D4D8DC;       /* Subtle borders */
  --color-border-accent: #C7CDD3;          /* Prominent borders */
  
  /* ===================
     TYPOGRAPHY SYSTEM
     =================== */
  
  /* Font Family */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  
  /* Responsive Typography Scale - Mobile First Fluid */
  --font-size-xs: clamp(16px, 4vw, 18px);      /* Legal text, disclaimers */
  --font-size-sm: clamp(18px, 4.5vw, 20px);    /* Minimum body text */
  --font-size-base: clamp(20px, 5vw, 22px);    /* Standard body content */
  --font-size-lg: clamp(24px, 6vw, 28px);      /* Large body text */
  --font-size-xl: clamp(28px, 7vw, 32px);      /* Section headings */
  --font-size-2xl: clamp(32px, 8vw, 36px);     /* Page headings */
  --font-size-3xl: clamp(36px, 9vw, 42px);     /* Main page titles */
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.25;               /* Headlines */
  --line-height-normal: 1.4;               /* UI text */
  --line-height-relaxed: 1.6;              /* Body text */
  --line-height-loose: 1.8;                /* Long form content */
  
  /* ===================
     SPACING SYSTEM
     =================== */
  
  /* 8-Point Grid System */
  --spacing-xs: 4px;    /* 0.25rem - Fine adjustments */
  --spacing-sm: 8px;    /* 0.5rem - Small gaps */
  --spacing-md: 16px;   /* 1rem - Standard spacing */
  --spacing-lg: 24px;   /* 1.5rem - Section gaps */
  --spacing-xl: 32px;   /* 2rem - Large sections */
  --spacing-2xl: 48px;  /* 3rem - Major sections */
  --spacing-3xl: 64px;  /* 4rem - Page sections */
  --spacing-4xl: 96px;  /* 6rem - Hero sections */
  
  /* Component-Specific Spacing */
  --component-padding-sm: var(--spacing-lg);   /* 24px - Cards, buttons */
  --component-padding-md: var(--spacing-xl);   /* 32px - Forms, containers */
  --component-padding-lg: var(--spacing-2xl);  /* 48px - Page sections */
  
  /* ===================
     INTERACTIVE ELEMENTS
     =================== */
  
  /* Touch Targets - Senior-Friendly */
  --touch-target-min: 44px;          /* WCAG minimum */
  --touch-target-comfortable: 48px;   /* Recommended standard */
  --touch-target-large: 56px;        /* Large action buttons */
  
  /* Border Radius */
  --radius-sm: 4px;    /* Small elements, inputs */
  --radius-md: 8px;    /* Cards, buttons */
  --radius-lg: 12px;   /* Large cards, modals */
  --radius-xl: 16px;   /* Hero sections, prominent cards */
  
  /* Border Widths */
  --border-width-thin: 1px;
  --border-width-default: 2px;
  --border-width-thick: 3px;
  
  /* Shadows & Elevation */
  --shadow-sm: 0 1px 3px rgba(27, 54, 93, 0.12);   /* Subtle cards */
  --shadow-md: 0 4px 6px rgba(27, 54, 93, 0.15);   /* Standard cards */
  --shadow-lg: 0 10px 15px rgba(27, 54, 93, 0.20); /* Prominent modals */
  --shadow-xl: 0 20px 25px rgba(27, 54, 93, 0.25); /* Hero sections */
  
  /* Focus Ring */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-interactive-focus);
  
  /* ===================
     TRANSITIONS
     =================== */
  
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);   /* Micro-interactions */
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);   /* Standard transitions */
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);   /* Complex animations */
  
  /* Easing Functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ===================
     LAYOUT SYSTEM
     =================== */
  
  /* Breakpoints */
  --breakpoint-sm: 640px;   /* Mobile landscape */
  --breakpoint-md: 768px;   /* Tablet */
  --breakpoint-lg: 1024px;  /* Desktop */
  --breakpoint-xl: 1280px;  /* Large desktop */
  --breakpoint-2xl: 1536px; /* Extra large */
  
  /* Container Sizes */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;
  
  /* Z-Index Scale */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;
}

/* ===================
   ACCESSIBILITY PREFERENCES
   =================== */

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #F5F5F5;
    --color-text-secondary: #CCCCCC;
    --color-text-tertiary: #A0A0A0;
    --color-bg-primary: #1A1A1A;
    --color-bg-secondary: #2D2D2D;
    --color-bg-tertiary: #404040;
    --color-border-primary: #404040;
    --color-border-secondary: #525252;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --color-primary-navy: #000080;
    --color-text-primary: #000000;
    --color-text-secondary: #000000;
    --color-bg-primary: #FFFFFF;
    --color-border-primary: #000000;
    --border-width-default: var(--border-width-thick);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-base: 0.01ms;
    --transition-slow: 0.01ms;
  }
}

/* ===================
   PRINT STYLES
   =================== */

@media print {
  :root {
    --color-primary-navy: #000000;
    --color-primary-blue: #333333;
    --color-success-green: #000000;
    --color-accent-gold: #666666;
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #FFFFFF;
    --color-bg-tertiary: #FFFFFF;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}