/* WrittenExpressions - CSS Variables
 * Professional design for incarcerated friends and family portal
 * Emphasizing trust, warmth, and accessibility
 */

:root {
    /* Primary Brand Colors - Purple Palette (Confirmed Brand Color) */
    --aa-primary: #b8a9d9; /* Brand purple - primary brand color */
    --aa-primary-light: #d4c5e8; /* Light purple for hover states */
    --aa-primary-dark: #9b87c4; /* Darker purple for emphasis */
    --aa-secondary: #6B7280; /* Neutral gray */
    --aa-accent: #5EEAD4; /* Soft teal - gentle, harmonious with purple */
    --aa-accent-light: #CCFBF1; /* Very light teal for backgrounds - PLACEHOLDER */

    /* Extended Purple Palette - Additional Shades */
    --aa-purple: #b8a9d9; /* Base brand purple (same as primary) */
    --aa-purple-light: #d4c5e8; /* Light purple for gradients */
    --aa-purple-lighter: #e8ddf0; /* Lighter purple for gradients */
    --aa-purple-dark: #2d1b49; /* Dark purple for text on purple backgrounds */
    --aa-purple-hover: #9b87c4; /* Darker purple for hover states (same as primary-dark) */
    --aa-purple-border: rgba(184, 169, 217, 0.2); /* Semi-transparent for subtle borders */

    /* Theme-Safe Background Colors - Subtle purple tints that work in both light and dark mode */
    --aa-bg-primary: #FAF9FC; /* Very light purple-tinted off-white - for main backgrounds */
    --aa-bg-secondary: #F5F3F8; /* Light purple-tinted background - for cards and sections */
    --aa-bg-tertiary: #F0EDF5; /* Medium purple-tinted background - for subtle emphasis */
    --aa-bg-card: #FDFCFE; /* Extremely subtle purple tint - for elevated cards */

    /* Focus States */
    --aa-focus-bg: #fff9c4; /* Pale yellow background for focused admin inputs */

    /* Semantic Colors */
    --aa-success: #10B981; /* Green for success messages */
    --aa-danger: #EF4444; /* Red for errors */
    --aa-warning: #F59E0B; /* Amber for warnings */
    --aa-info: #3B82F6; /* Blue for information */

    /* Success Colors - Light & Dark Variants */
    --aa-success-bg-light: #d1f4e0; /* Light green background for success */
    --aa-success-text-dark: #0f5132; /* Dark green text for success */
    --aa-success-border-light: #baebcf; /* Light green border for success */
    --aa-success-bg-dark: #064e3b; /* Dark green background for success */
    --aa-success-text-light: #d1fae5; /* Light green text for success on dark bg */
    --aa-success-border-dark: #047857; /* Dark green border for success */

    /* Danger/Error Colors - Light & Dark Variants */
    --aa-danger-bg-light: #f8d7da; /* Light red background for errors */
    --aa-danger-text-dark: #721c24; /* Dark red text for errors */
    --aa-danger-border-light: #f5c6cb; /* Light red border for errors */
    --aa-danger-bg-dark: #7f1d1d; /* Dark red background for errors */
    --aa-danger-text-light: #fecaca; /* Light red text for errors on dark bg */
    --aa-danger-border-dark: #991b1b; /* Dark red border for errors */

    /* Warning Colors - Light & Dark Variants */
    --aa-warning-bg-light: #fff3cd; /* Light amber background for warnings */
    --aa-warning-text-dark: #856404; /* Dark amber text for warnings */
    --aa-warning-border-light: #ffeaa7; /* Light amber border for warnings */
    --aa-warning-bg-dark: #78350f; /* Dark amber background for warnings */
    --aa-warning-text-light: #fef3c7; /* Light amber text for warnings on dark bg */
    --aa-warning-border-dark: #92400e; /* Dark amber border for warnings */

    /* Info Colors - Light & Dark Variants */
    --aa-info-bg-light: #d1ecf1; /* Light blue background for information */
    --aa-info-text-dark: #0c5460; /* Dark blue text for information */
    --aa-info-border-light: #bee5eb; /* Light blue border for information */
    --aa-info-bg-dark: #1e3a8a; /* Dark blue background for information */
    --aa-info-text-light: #bfdbfe; /* Light blue text for information on dark bg */
    --aa-info-border-dark: #1e40af; /* Dark blue border for information */

    /* Common Neutral Grays - Used Throughout App */
    --aa-border-light: #e9ecef; /* Light border color */
    --aa-border-medium: #dee2e6; /* Medium border color */
    --aa-bg-light: #f8f9fa; /* Light background */
    --aa-bg-medium: #e9ecef; /* Medium background */

    /* Table & Row Interaction Colors */
    --aa-row-hover: #e7f3ff; /* Light blue for row hover */
    --aa-row-inactive: #fff3cd; /* Yellow for inactive rows */
    --aa-row-inactive-hover: #ffe8a1; /* Darker yellow for inactive row hover */

    /* Accent Colors - Used Throughout App */
    --aa-accent-gold: #EAB308; /* Refined gold for featured/star icons */

    /* Status Badge Colors - Semantic, Used Throughout App */
    --aa-state-active-bg: #d4edda; /* Green background for active status */
    --aa-state-active-text: #155724; /* Dark green text for active status */
    --aa-state-active-border: #c3e6cb; /* Green border for active status */
    --aa-state-inactive-bg: #f8d7da; /* Red background for inactive status */
    --aa-state-inactive-text: #721c24; /* Dark red text for inactive status */
    --aa-state-inactive-border: #f5c6cb; /* Red border for inactive status */
    --aa-state-pending-bg: #fff3cd; /* Yellow background for pending status */
    --aa-state-pending-text: #856404; /* Dark yellow/brown text for pending status */
    --aa-state-pending-border: #ffeaa7; /* Yellow border for pending status */
    --aa-state-completed-bg: #d1ecf1; /* Blue background for completed status */
    --aa-state-completed-text: #0c5460; /* Dark blue text for completed status */
    --aa-state-completed-border: #bee5eb; /* Blue border for completed status */

    /* Danger/Error Colors - Light Backgrounds */
    --aa-danger-bg-light: #f8d7da; /* Light red background for errors */
    --aa-danger-text-dark: #721c24; /* Dark red text for errors */

    /* Table Borders */
    --aa-table-border: #f1f3f4; /* Very light border for table rows */

    /* Neutral Palette */
    --aa-white: #FFFFFF;
    --aa-light: #F9FAFB; /* Very light gray background */
    --aa-light-gray: #F3F4F6; /* Light gray for cards */
    --aa-medium-gray: #D1D5DB; /* Medium gray for borders */
    --aa-dark-gray: #4B5563; /* Dark gray for text */
    --aa-dark: #1F2937; /* Very dark gray for headings */
    --aa-black: #111827; /* Near black for high contrast */
    
    /* Theme-safe text colors - Always readable on light backgrounds */
    --aa-text-primary: #1F2937; /* Primary text - dark for light backgrounds */
    --aa-text-secondary: #6B7280; /* Secondary text - muted but readable */
    --aa-text-light: #9CA3AF; /* Light text for less important content */
    --aa-text-primary-gray: #4B5563; /* Alternative primary text color */
    /* Typography */
    --aa-font-family-primary: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --aa-font-family-heading: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --aa-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    /* Font Sizes - Accessible and readable */
    --aa-font-size-xxs: 0.50rem; /* 8px */
    --aa-font-size-xs: 0.75rem; /* 12px */
    --aa-font-size-sm: 0.875rem; /* 14px */
    --aa-font-size-base: 1rem; /* 16px */
    --aa-font-size-lg: 1.125rem; /* 18px */
    --aa-font-size-xl: 1.25rem; /* 20px */
    --aa-font-size-2xl: 1.5rem; /* 24px */
    --aa-font-size-3xl: 1.875rem; /* 30px */
    --aa-font-size-4xl: 2.25rem; /* 36px */
    --aa-font-size-5xl: 3rem; /* 48px */
    /* Font Weights */
    --aa-font-weight-light: 300;
    --aa-font-weight-normal: 400;
    --aa-font-weight-medium: 500;
    --aa-font-weight-semibold: 600;
    --aa-font-weight-bold: 700;
    --aa-font-weight-extrabold: 800;
    /* Line Heights */
    --aa-line-height-tight: 1.25;
    --aa-line-height-base: 1.5;
    --aa-line-height-relaxed: 1.75;
    /* Spacing System - 8px base grid */
    --aa-spacing-0: 0.125rem;
    --aa-spacing-1: 0.25rem; /* 4px */
    --aa-spacing-2: 0.5rem; /* 8px */
    --aa-spacing-3: 0.75rem; /* 12px */
    --aa-spacing-4: 1rem; /* 16px */
    --aa-spacing-5: 1.25rem; /* 20px */
    --aa-spacing-6: 1.5rem; /* 24px */
    --aa-spacing-7: 1.75rem; /* 28px */ 
    --aa-spacing-8: 2rem; /* 32px */
    --aa-spacing-10: 2.5rem; /* 40px */
    --aa-spacing-12: 3rem; /* 48px */
    --aa-spacing-16: 4rem; /* 64px */
    --aa-spacing-20: 5rem; /* 80px */
    --aa-spacing-24: 6rem; /* 96px */
    /* Legacy spacing aliases - for backwards compatibility */
    --aa-spacing-xxs: var(--aa-spacing-0); /* 4px */
    --aa-spacing-xs: var(--aa-spacing-1); /* 4px */
    --aa-spacing-sm: var(--aa-spacing-2); /* 8px */
    --aa-spacing-md: var(--aa-spacing-4); /* 16px */
    --aa-spacing-lg: var(--aa-spacing-6); /* 24px */
    --aa-spacing-xl: var(--aa-spacing-12); /* 48px */
    /* Border Radius */
    --aa-border-radius-none: 0;
    --aa-border-radius-sm: 0.25rem; /* 4px */
    --aa-border-radius-md: 0.5rem; /* 8px */
    --aa-border-radius-lg: 0.75rem; /* 12px */
    --aa-border-radius-xl: 1rem; /* 16px */
    --aa-border-radius-2xl: 1.5rem; /* 24px */
    --aa-border-radius-full: 9999px; /* Fully rounded */
    /* Shadows */
    --aa-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --aa-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --aa-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --aa-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* Transitions */
    --aa-transition-fast: 0.15s ease-in-out;
    --aa-transition-base: 0.2s ease-in-out;
    --aa-transition-slow: 0.3s ease-in-out;
    /* Z-Index Scale */
    --aa-z-dropdown: 1000;
    --aa-z-sticky: 1020;
    --aa-z-fixed: 1030;
    --aa-z-modal-backdrop: 1040;
    --aa-z-modal: 1050;
    --aa-z-popover: 1060;
    --aa-z-tooltip: 1070;
    --aa-z-toast: 2100; /* Toast notifications - highest priority for visibility */
    /* Container Widths */
    --aa-container-sm: 640px;
    --aa-container-md: 768px;
    --aa-container-lg: 1024px;
    --aa-container-xl: 1280px;
    --aa-container-2xl: 1536px;
}