/* ==========================================================================
   ACSR FOUNDATION.CSS - Design System & Global Styles
   ==========================================================================

   Extracted from: styles.css (lines 17-174)
   Purpose: CSS Custom Properties (Variables) and Base Styles
   Part of: DCF 5.0 Framework Migration

   CONTENTS:
   1. CSS Custom Properties (Design Tokens)
      - Brand Colors
      - Neutral Colors
      - Spacing System
      - Border Radius
      - Shadows
      - Animation System
   2. Global Reset
   3. Base Typography
   4. Container Utilities

   ========================================================================== */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

:root {
    /* ========================================================================
       COMPLETE COLOR SYSTEM - All colors from CSS + HTML audit
       Based on COLOR_SYSTEM_AUDIT.md analysis
       ======================================================================== */

    /* ========== PRIMARY BRAND (SAGE GREEN) - #35645a ========== */
    --brand-primary: #35645a;
    --brand-primary-rgb: 53, 100, 90;
    --brand-primary-dark: #2d5449;
    --brand-primary-darker: #254238;
    --brand-primary-light: #4a7366;
    --brand-primary-lighter: #4a7d71;

    /* Primary Opacity Variations (Most Used in Project) */
    --brand-primary-3: rgba(53, 100, 90, 0.03);   /* Subtle tint */
    --brand-primary-5: rgba(53, 100, 90, 0.05);   /* Very light */
    --brand-primary-10: rgba(53, 100, 90, 0.1);   /* Light tints - 70 uses */
    --brand-primary-15: rgba(53, 100, 90, 0.15);  /* Shadows - 41 uses */
    --brand-primary-20: rgba(53, 100, 90, 0.2);   /* Borders */
    --brand-primary-25: rgba(53, 100, 90, 0.25);  /* Medium borders */
    --brand-primary-30: rgba(53, 100, 90, 0.3);   /* Shadows */
    --brand-primary-40: rgba(53, 100, 90, 0.4);   /* Medium overlay */
    --brand-primary-50: rgba(53, 100, 90, 0.5);   /* Half opacity */
    --brand-primary-60: rgba(53, 100, 90, 0.6);   /* Strong tint */
    --brand-primary-70: rgba(53, 100, 90, 0.7);   /* Dark overlay */
    --brand-primary-80: rgba(53, 100, 90, 0.8);   /* Very dark - 6 uses */
    --brand-primary-90: rgba(53, 100, 90, 0.9);   /* Almost solid */

    /* Legacy Primary Aliases */
    --brand-primary-50-old: rgba(53, 100, 90, 0.05);
    --brand-primary-100: rgba(53, 100, 90, 0.1);
    --brand-primary-200: rgba(53, 100, 90, 0.2);
    --brand-primary-600: #2d5449;
    --brand-primary-700: #254238;

    /* ========== ACCENT/SECONDARY (ORANGE) - #ea580c ========== */
    --brand-secondary: #ea580c;
    --brand-secondary-rgb: 234, 88, 12;
    --brand-accent: #ea580c;
    --brand-accent-rgb: 234, 88, 12;

    /* Accent Color Variations */
    --brand-accent-light: #ff6b1a;
    --brand-accent-lighter: #fb923c;
    --brand-accent-dark: #c2410c;

    /* Accent Opacity Variations (Heavily Used - 240+ total) */
    --brand-accent-10: rgba(234, 88, 12, 0.1);   /* MOST USED - 240+ - light badges */
    --brand-accent-15: rgba(234, 88, 12, 0.15);  /* Light backgrounds */
    --brand-accent-20: rgba(234, 88, 12, 0.2);   /* 100+ - borders */
    --brand-accent-25: rgba(234, 88, 12, 0.25);  /* Medium tint */
    --brand-accent-30: rgba(234, 88, 12, 0.3);   /* 50+ - shadows */
    --brand-accent-40: rgba(234, 88, 12, 0.4);   /* Strong tint */
    --brand-accent-50: rgba(234, 88, 12, 0.5);   /* Half opacity */

    /* Legacy Accent Aliases */
    --brand-secondary-light: #ff6b1a;
    --brand-secondary-dark: #c2410c;
    --accent-glow: var(--brand-secondary-light);

    /* ========== COMPLETE SLATE SCALE (PRIMARY TEXT/NEUTRAL) ========== */
    --color-slate-50: #f8fafc;    /* 29 uses - light backgrounds */
    --color-slate-100: #f1f5f9;   /* 17 uses - card backgrounds */
    --color-slate-200: #e2e8f0;   /* 112 uses - borders/dividers */
    --color-slate-300: #cbd5e1;   /* Borders */
    --color-slate-400: #94a3b8;   /* Muted text */
    --color-slate-500: #64748b;   /* 162 uses - MAIN TEXT COLOR */
    --color-slate-600: #475569;   /* Secondary text */
    --color-slate-700: #334155;   /* Dark text */
    --color-slate-800: #1e293b;   /* Darker text */
    --color-slate-900: #0f172a;   /* Darkest text/headings */

    /* Slate Opacity Variations */
    --slate-900-10: rgba(15, 23, 42, 0.1);   /* 23 uses */
    --slate-900-15: rgba(15, 23, 42, 0.15);  /* 17 uses */

    /* ========== COMPLETE GRAY SCALE ========== */
    --color-gray-50: #f8f9fa;     /* Backgrounds */
    --color-gray-100: #f5f5f5;    /* Backgrounds */
    --color-gray-200: #e9ecef;    /* Borders */
    --color-gray-300: #d1d5db;    /* Light borders */
    --color-gray-600: #525252;    /* 10 uses - text */
    --color-gray-700: #333333;    /* 4 uses - dark text */
    --color-gray-900: #171717;    /* 4 uses - headings */

    /* ========== WHITES & OFF-WHITES ========== */
    --color-white: #ffffff;       /* 10 uses - pure white */
    --color-off-white: #fffbf8;   /* 2 uses - warm white */
    --color-cream: #fff7ed;       /* 1 use - cream background */
    --color-mint-white: #f8fffe;  /* 2 uses - cool white */

    /* ========== BLACKS & NEAR-BLACKS ========== */
    --color-black: #000000;
    --color-near-black: #1a1a1a;  /* 1 use */

    /* ========== STATE COLORS ========== */
    --color-success: #10b981;     /* 13 uses - green */
    --color-success-dark: #297021; /* 1 use - dark green */
    --color-error: #dc2626;       /* 2 uses - red */
    --color-warning: #fbbf24;     /* 2 uses - amber */
    --color-warning-gold: #ffd700; /* 1 use - gold */
    --color-info: #e3f2fd;        /* 1 use - blue 50 */

    /* ========== WHITE OPACITY OVERLAYS (84+ uses) ========== */
    --white-5: rgba(255, 255, 255, 0.05);
    --white-10: rgba(255, 255, 255, 0.1);    /* 40 uses */
    --white-15: rgba(255, 255, 255, 0.15);   /* Subtle overlays */
    --white-20: rgba(255, 255, 255, 0.2);    /* 67 uses */
    --white-30: rgba(255, 255, 255, 0.3);    /* 7 uses */
    --white-40: rgba(255, 255, 255, 0.4);    /* 16 uses */
    --white-50: rgba(255, 255, 255, 0.5);    /* 43 uses */
    --white-60: rgba(255, 255, 255, 0.6);    /* 84 uses - MOST USED white overlay */
    --white-80: rgba(255, 255, 255, 0.8);    /* 67 uses - glassmorphism */
    --white-90: rgba(255, 255, 255, 0.9);    /* 27 uses */
    --white-95: rgba(255, 255, 255, 0.95);   /* 5 uses - modal backgrounds */
    --white-98: rgba(255, 255, 255, 0.98);   /* High opacity */

    /* ========== BLACK OPACITY OVERLAYS ========== */
    --black-3: rgba(0, 0, 0, 0.03);
    --black-5: rgba(0, 0, 0, 0.05);    /* 5 uses - subtle shadows */
    --black-8: rgba(0, 0, 0, 0.08);    /* 31 uses - box shadows */
    --black-10: rgba(0, 0, 0, 0.1);    /* 45 uses - shadows */
    --black-15: rgba(0, 0, 0, 0.15);   /* 35 uses - medium shadows */
    --black-20: rgba(0, 0, 0, 0.2);    /* Borders/shadows */
    --black-30: rgba(0, 0, 0, 0.3);    /* Strong shadows */
    --black-50: rgba(0, 0, 0, 0.5);    /* 15 uses - dark overlays */
    --black-80: rgba(0, 0, 0, 0.8);    /* 41 uses - very dark overlays */
    --black-90: rgba(0, 0, 0, 0.9);    /* 6 uses - almost solid */

    /* ========== GRADIENT COMBINATIONS ========== */
    /* Primary Gradients */
    --gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    --gradient-primary-accent: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
    --gradient-primary-light: linear-gradient(135deg, rgba(53, 100, 90, 0.05), rgba(249, 115, 22, 0.05));

    /* Accent Gradients */
    --gradient-accent: linear-gradient(135deg, var(--brand-accent) 0%, #fb923c 100%);
    --gradient-accent-secondary: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-secondary) 100%);

    /* Success Gradient */
    --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--brand-accent) 100%);

    /* ========== SEMANTIC COLOR ALIASES (For Easy Updates) ========== */
    /* Text Colors */
    --text-primary: var(--color-slate-500);      /* Main text - #64748b */
    --text-secondary: var(--color-slate-400);    /* Secondary text */
    --text-heading: var(--color-gray-900);       /* Headings - #171717 */
    --text-muted: var(--color-slate-400);        /* Muted text */
    --text-inverse: var(--color-white);          /* White text on dark bg */
    --text-dark: var(--brand-primary);           /* Brand primary for emphasis */
    --text-accent: var(--brand-accent);          /* Accent text */

    /* Background Colors */
    --bg-primary: var(--color-white);            /* Main background */
    --bg-secondary: var(--color-slate-50);       /* Secondary background */
    --bg-tertiary: var(--color-slate-100);       /* Tertiary background */
    --bg-dark: var(--brand-primary);             /* Dark background */
    --bg-accent: var(--brand-accent);            /* Accent background */
    --bg-light: var(--color-slate-50);           /* Light background */

    /* Border Colors */
    --border-light: var(--color-slate-200);      /* Light borders - 112 uses */
    --border-default: var(--color-slate-300);    /* Default borders */
    --border-dark: var(--color-slate-400);       /* Dark borders */
    --border-primary: var(--brand-primary);      /* Primary brand borders */
    --border-accent: var(--brand-accent);        /* Accent borders */

    /* ========== LEGACY SUPPORT ALIASES (DO NOT REMOVE) ========== */
    --primary: var(--brand-primary);
    --primary-dark: var(--brand-primary-dark);
    --accent: var(--brand-secondary);
    --brand-neutral-white: var(--color-white);
    --brand-neutral-light: var(--color-slate-50);
    --brand-neutral-gray: var(--color-slate-500);
    --brand-neutral-dark: var(--color-slate-700);
    --brand-neutral-black: var(--color-slate-900);
    --success: var(--color-success);
    --secondary: var(--brand-secondary);

    /* DCF Framework Spacing System (8px base grid) */
    --space-0: 0px;
    --space-px: 1px;
    --space-0-5: 0.125rem;   /* 2px */
    --space-1: 0.25rem;      /* 4px */
    --space-1-5: 0.375rem;   /* 6px */
    --space-2: 0.5rem;       /* 8px */
    --space-2-5: 0.625rem;   /* 10px */
    --space-3: 0.75rem;      /* 12px */
    --space-3-5: 0.875rem;   /* 14px */
    --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 */

    /* Semantic Spacing (DCF Framework) */
    --space-xs: var(--space-1);     /* 4px */
    --space-sm: var(--space-2);     /* 8px */
    --space-md: var(--space-4);     /* 16px */
    --space-lg: var(--space-6);     /* 24px */
    --space-xl: var(--space-8);     /* 32px */
    --space-2xl: var(--space-12);   /* 48px */
    --space-3xl: var(--space-16);   /* 64px */

    /* Legacy Spacing Support (Aliases) */
    --spacing-xs: var(--space-1);
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);
    --spacing-2xl: var(--space-12);
    --spacing-3xl: var(--space-16);

    /* DCF Framework Border Radius */
    --radius-none: 0px;
    --radius-sm: 0.125rem;      /* 2px */
    --radius-default: 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;      /* Circular */

    /* Legacy Border Radius Support (Aliases) */
    --border-radius-sm: var(--radius-lg);
    --border-radius-md: var(--radius-2xl);
    --border-radius-lg: var(--radius-3xl);
    --border-radius-xl: 2rem;

    /* DCF Framework Shadow System */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* Brand-Specific Shadow Variations */
    --shadow-brand: 0 10px 25px rgba(var(--brand-primary-rgb), 0.15);
    --shadow-accent: 0 8px 20px rgba(var(--brand-accent-rgb), 0.2);
    --shadow-glow: 0 0 20px rgba(var(--brand-secondary-rgb), 0.3);
    --shadow-dark-glow: 0 0 25px rgba(var(--brand-primary-rgb), 0.4);

    /* DCF Framework Animation System */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;

    /* Semantic Durations */
    --transition-fast: var(--duration-200);
    --transition-base: var(--duration-300);
    --transition-smooth: var(--duration-500);
    --transition-slideshow: 800ms;

    /* DCF Framework Easing Functions */
    --ease-linear: linear;
    --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-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);

    /* Legacy Animation Support (Aliases) */
    --ease-bounce: var(--ease-out-back);
    --ease-smooth: var(--ease-in-out);
}

/* ==========================================================================
   2. GLOBAL RESET & BASE STYLES
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    touch-action: pan-y;  /* ADDED - Explicitly allow vertical touch scrolling */
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;  /* ADDED - Explicitly allow vertical touch scrolling */
    background: var(--bg-secondary);
}

/* ==========================================================================
   3. GLOBAL UTILITY CLASSES
   ========================================================================== */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   END FOUNDATION.CSS
   ========================================================================== */