/* ================================
   STEWART FAMILY LAW - DESIGN TOKENS
   Centralized Control of Colors, Fonts, and Design System
   ================================ */

:root {
    /* ================================
       BRAND COLORS - ADA COMPLIANT
       ================================ */
    
    /* Primary Brand Colors */
    --color-primary-900: #1e3a8a;    /* Navy - High contrast */
    --color-primary-800: #1e40af;    /* Deep blue */
    --color-primary-700: #1d4ed8;    /* Primary blue */
    --color-primary-600: #2563eb;    /* Standard blue - Foundation primary */
    --color-primary-500: #3b82f6;    /* Medium blue */
    --color-primary-400: #60a5fa;    /* Light blue */
    --color-primary-300: #93c5fd;    /* Lighter blue */
    --color-primary-200: #bfdbfe;    /* Very light blue */
    --color-primary-100: #dbeafe;    /* Pale blue */
    --color-primary-50: #eff6ff;     /* Background blue */

    /* Secondary/Accent Colors */
    --color-accent-900: #a16207;     /* Dark gold */
    --color-accent-800: #ca8a04;     /* Deep gold */
    --color-accent-700: #d97706;     /* Primary gold - ADA compliant */
    --color-accent-600: #ea580c;     /* Orange gold */
    --color-accent-500: #f59e0b;     /* Medium gold */
    --color-accent-400: #fbbf24;     /* Light gold */
    --color-accent-300: #fcd34d;     /* Lighter gold */
    --color-accent-200: #fed7aa;     /* Very light gold */
    --color-accent-100: #fef3c7;     /* Pale gold */
    --color-accent-50: #fffbeb;      /* Background gold */

    /* Neutral Colors - ADA Compliant */
    --color-neutral-900: #111827;    /* True black - Maximum contrast */
    --color-neutral-800: #1f2937;    /* Very dark gray */
    --color-neutral-700: #374151;    /* Dark gray - 4.5:1 contrast */
    --color-neutral-600: #4b5563;    /* Medium dark gray */
    --color-neutral-500: #6b7280;    /* Medium gray */
    --color-neutral-400: #9ca3af;    /* Light gray */
    --color-neutral-300: #d1d5db;    /* Border gray */
    --color-neutral-200: #e5e7eb;    /* Light border */
    --color-neutral-100: #f3f4f6;    /* Background gray */
    --color-neutral-50: #f9fafb;     /* Very light background */

    /* Semantic Colors - ADA Compliant */
    --color-success-700: #047857;    /* Dark green */
    --color-success-600: #059669;    /* Success green */
    --color-success-500: #10b981;    /* Medium green */
    --color-success-100: #d1fae5;    /* Light green background */

    --color-warning-700: #b45309;    /* Dark orange */
    --color-warning-600: #d97706;    /* Warning orange */
    --color-warning-500: #f59e0b;    /* Medium orange */
    --color-warning-100: #fef3c7;    /* Light orange background */

    --color-error-700: #b91c1c;      /* Dark red */
    --color-error-600: #dc2626;      /* Error red */
    --color-error-500: #ef4444;      /* Medium red */
    --color-error-100: #fee2e2;      /* Light red background */

    --color-info-700: #1d4ed8;       /* Dark blue */
    --color-info-600: #2563eb;       /* Info blue */
    --color-info-500: #3b82f6;       /* Medium blue */
    --color-info-100: #dbeafe;       /* Light blue background */

    /* Text Colors - ADA Compliant */
    --color-text-primary: var(--color-neutral-900);     /* Maximum contrast text */
    --color-text-secondary: var(--color-neutral-700);   /* High contrast text */
    --color-text-muted: var(--color-neutral-600);       /* Medium contrast text */
    --color-text-disabled: var(--color-neutral-400);    /* Disabled text */
    --color-text-inverse: #ffffff;                      /* White text on dark backgrounds */
    --color-text-link: var(--color-primary-600);        /* Link text */
    --color-text-link-hover: var(--color-primary-900);  /* Link hover text */

    /* Background Colors */
    --color-bg-primary: #ffffff;                        /* Main background */
    --color-bg-secondary: var(--color-neutral-50);      /* Secondary background */
    --color-bg-tertiary: var(--color-neutral-100);      /* Tertiary background */
    --color-bg-overlay: rgba(0, 0, 0, 0.5);            /* Overlay background */

    /* Border Colors */
    --color-border-light: var(--color-neutral-200);     /* Light borders */
    --color-border-medium: var(--color-neutral-300);    /* Medium borders */
    --color-border-dark: var(--color-neutral-400);      /* Dark borders */
    --color-border-focus: var(--color-primary-600);     /* Focus borders */

    /* ================================
       TYPOGRAPHY SYSTEM
       ================================ */

    /* Font Families */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Font Sizes - Responsive Scale */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px - Base font size */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */
    --font-size-5xl: 3rem;       /* 48px */
    --font-size-6xl: 3.75rem;    /* 60px */
    --font-size-7xl: 4.5rem;     /* 72px */
    --font-size-8xl: 6rem;       /* 96px */

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* Letter Spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;

    /* ================================
       SPACING SYSTEM
       ================================ */

    /* Base Spacing Unit: 0.25rem (4px) */
    --space-0: 0;
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */
    --space-32: 8rem;        /* 128px */
    --space-40: 10rem;       /* 160px */
    --space-48: 12rem;       /* 192px */
    --space-56: 14rem;       /* 224px */
    --space-64: 16rem;       /* 256px */

    /* Semantic Spacing */
    --spacing-section: var(--space-16);     /* Standard section padding */
    --spacing-component: var(--space-8);    /* Component internal spacing */
    --spacing-element: var(--space-4);      /* Element spacing */

    /* ================================
       BORDER RADIUS SYSTEM
       ================================ */

    --radius-none: 0;
    --radius-sm: 0.125rem;    /* 2px */
    --radius-base: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;    /* 6px */
    --radius-lg: 0.5rem;      /* 8px */
    --radius-xl: 0.75rem;     /* 12px */
    --radius-2xl: 1rem;       /* 16px */
    --radius-3xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;    /* Full rounded */

    /* ================================
       SHADOW SYSTEM
       ================================ */

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-2xl: 0 50px 100px -20px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Focus Shadow for Accessibility */
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.3);

    /* ================================
       TRANSITION SYSTEM
       ================================ */

    --transition-duration-fast: 150ms;
    --transition-duration-normal: 250ms;
    --transition-duration-slow: 350ms;
    --transition-duration-slower: 500ms;

    --transition-timing-linear: linear;
    --transition-timing-ease: ease;
    --transition-timing-ease-in: ease-in;
    --transition-timing-ease-out: ease-out;
    --transition-timing-ease-in-out: ease-in-out;

    /* Common Transitions */
    --transition-fast: var(--transition-duration-fast) var(--transition-timing-ease-in-out);
    --transition-normal: var(--transition-duration-normal) var(--transition-timing-ease-in-out);
    --transition-slow: var(--transition-duration-slow) var(--transition-timing-ease-in-out);

    /* ================================
       Z-INDEX SYSTEM
       ================================ */

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* ================================
       BREAKPOINT SYSTEM
       ================================ */

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ================================
       COMPONENT SPECIFIC TOKENS
       ================================ */

    /* Button Tokens */
    --button-padding-sm: var(--space-2) var(--space-4);
    --button-padding-base: var(--space-3) var(--space-6);
    --button-padding-lg: var(--space-4) var(--space-8);
    --button-border-radius: var(--radius-lg);
    --button-font-weight: var(--font-weight-semibold);
    --button-transition: all var(--transition-fast);

    /* Card Tokens */
    --card-padding: var(--space-6);
    --card-border-radius: var(--radius-xl);
    --card-shadow: var(--shadow-base);
    --card-shadow-hover: var(--shadow-lg);
    --card-border: 1px solid var(--color-border-light);

    /* Form Tokens */
    --form-input-padding: var(--space-3) var(--space-4);
    --form-input-border-radius: var(--radius-md);
    --form-input-border: 1px solid var(--color-border-medium);
    --form-input-border-focus: 2px solid var(--color-border-focus);
    --form-input-bg: var(--color-bg-primary);
    --form-label-font-weight: var(--font-weight-medium);

    /* Header Tokens */
    --header-height: 80px;
    --header-bg: rgba(255, 255, 255, 0.95);
    --header-backdrop-filter: blur(10px);
    --header-shadow: var(--shadow-sm);
    --header-border: 1px solid var(--color-border-light);

    /* ================================
       UTILITY CLASSES
       ================================ */

    /* Text Colors */
    --utility-text-primary: var(--color-text-primary);
    --utility-text-secondary: var(--color-text-secondary);
    --utility-text-muted: var(--color-text-muted);
    --utility-text-white: var(--color-text-inverse);

    /* Background Colors */
    --utility-bg-primary: var(--color-primary-600);
    --utility-bg-secondary: var(--color-neutral-100);
    --utility-bg-accent: var(--color-accent-600);
    --utility-bg-success: var(--color-success-600);
    --utility-bg-warning: var(--color-warning-600);
    --utility-bg-error: var(--color-error-600);
}

/* ================================
   MEDIA QUERY MIXINS (CSS Custom Properties)
   ================================ */

@media (max-width: 639px) {
    :root {
        /* Adjust spacing for mobile */
        --spacing-section: var(--space-12);
        --spacing-component: var(--space-6);
        
        /* Adjust font sizes for mobile */
        --font-size-5xl: 2.25rem;    /* Smaller on mobile */
        --font-size-4xl: 1.875rem;
        --font-size-3xl: 1.5rem;
    }
}

@media (min-width: 640px) {
    :root {
        /* Small screens and up */
        --container-padding: var(--space-6);
    }
}

@media (min-width: 768px) {
    :root {
        /* Medium screens and up */
        --container-padding: var(--space-8);
    }
}

@media (min-width: 1024px) {
    :root {
        /* Large screens and up */
        --container-padding: var(--space-12);
        --spacing-section: var(--space-20);
    }
}

/* ================================
   ACCESSIBILITY TOKENS
   ================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
    }
}

@media (prefers-color-scheme: dark) {
    /* Dark mode tokens - Optional for future implementation */
    :root {
        --color-bg-primary: var(--color-neutral-900);
        --color-text-primary: var(--color-neutral-100);
        --color-text-secondary: var(--color-neutral-300);
    }
}

/* ================================
   FOUNDATION FRAMEWORK INTEGRATION
   ================================ */

/* Override Foundation's default palette with our design tokens */
:root {
    --foundation-palette-primary: var(--color-primary-600);
    --foundation-palette-secondary: var(--color-accent-600);
    --foundation-palette-success: var(--color-success-600);
    --foundation-palette-warning: var(--color-warning-600);
    --foundation-palette-alert: var(--color-error-600);
    
    /* Foundation Typography */
    --global-font-family: var(--font-family-primary);
    --header-font-family: var(--font-family-heading);
    --global-font-size: var(--font-size-base);
    --global-line-height: var(--line-height-normal);
    
    /* Foundation Spacing */
    --global-margin: var(--space-4);
    --global-padding: var(--space-4);
    
    /* Foundation Border Radius */
    --global-radius: var(--radius-md);
    
    /* Foundation Breakpoints (align with Foundation's defaults) */
    --small-breakpoint: 0;
    --medium-breakpoint: 40em;     /* 640px */
    --large-breakpoint: 64em;      /* 1024px */
    --xlarge-breakpoint: 75em;     /* 1200px */
    --xxlarge-breakpoint: 90em;    /* 1440px */
}

/* ================================
   DESIGN TOKEN USAGE EXAMPLES
   ================================ */

/*
USAGE EXAMPLES:

// Colors
background-color: var(--color-primary-600);
color: var(--color-text-primary);
border: 1px solid var(--color-border-light);

// Typography
font-family: var(--font-family-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-relaxed);

// Spacing
margin: var(--space-4) var(--space-6);
padding: var(--spacing-component);
gap: var(--space-3);

// Effects
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition-fast);

// Responsive
@media (min-width: var(--breakpoint-md)) {
    font-size: var(--font-size-xl);
}
*/