/* CSS Custom Properties and Design Tokens */

:root {
  /* === COLORS === */
  
  /* Primary Brand Colors */
  --color-ivey-green: #034638;
  --color-ivey-green-dark: #023329;
  --color-ivey-green-rgb: 3, 70, 56;
  --color-western-purple: #582C83;
  --color-western-purple-rgb: 88, 44, 131;
  --color-western-purple-dark: #4a2370;
  
  /* Secondary Colors */
  --color-turquoise: #0097A0;
  --color-turquoise-rgb: 0, 151, 160;
  --color-turquoise-dark: #007d85;
  --color-bright-green: #A6BB48;
  --color-bright-green-rgb: 166, 187, 72;
  
  /* Extended Palette (from styles.css consolidation) */
  --color-light-grey: #97999B;
  --color-warm-grey: #7E7F74;
  --color-light-warm-grey: #A8A99E;
  --color-sand: #C5B783;
  
  /* Neutral Colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-grey: #63666A;
  --color-border-light: #E1E5E9;
  
  /* Semantic Colors */
  --color-success: var(--color-bright-green);
  --color-success-rgb: var(--color-bright-green-rgb);
  --color-error: #DC3545;
  --color-error-rgb: 220, 53, 69;
  --color-warning: #FFC107;
  --color-warning-rgb: 255, 193, 7;
  --color-info: var(--color-turquoise);
  --color-info-rgb: var(--color-turquoise-rgb);
  
  /* === THEME VARIATIONS === */
  
  /* Light Theme (Default) */
  --theme-bg-primary: var(--color-white);
  --theme-bg-secondary: var(--color-warm-grey);
  --theme-bg-tertiary: #F1F3F4;
  --theme-text-primary: var(--color-black);
  --theme-text-secondary: var(--color-grey);
  --theme-text-tertiary: var(--color-light-grey);
  --theme-border-primary: var(--color-border-light);
  --theme-border-secondary: #D1D5DB;
  --theme-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --theme-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
  --theme-shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
  
  /* === TYPOGRAPHY === */
  
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-logo: 'Helvetica Neue', Arial, sans-serif;
  
  /* Font Sizes - Modular Scale (1.25 ratio) */
  --font-size-xs: 0.64rem;    /* 10.24px */
  --font-size-sm: 0.8rem;     /* 12.8px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.25rem;    /* 20px */
  --font-size-lg: 1.563rem;   /* 25px */
  --font-size-xl: 1.953rem;   /* 31.25px */
  --font-size-2xl: 2.441rem;  /* 39.06px */
  --font-size-3xl: 3.052rem;  /* 48.83px */
  
  /* 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;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
  
  /* === SPACING === */
  
  /* Spacing Scale (Based on 8px grid) */
  --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 */
  
  /* Component Specific Spacing */
  --space-form-group: var(--space-6);
  --space-section: var(--space-16);
  --space-component: var(--space-8);
  
  /* === LAYOUT === */
  
  /* Container Sizes */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  /* Layout Spacing */
  --layout-padding-mobile: var(--space-4);
  --layout-padding-tablet: var(--space-6);
  --layout-padding-desktop: var(--space-8);
  
  /* === BORDERS & RADII === */
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-base: 0.5rem;  /* 8px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;
  
  /* Border Widths */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 4px;
  
  /* === ANIMATIONS === */
  
  /* Timing 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-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  
  /* Duration */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 750ms;
  
  /* === Z-INDEX SCALE === */
  
  --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;
  
  /* === COMPONENT SPECIFIC === */
  
  /* Buttons */
  --button-height-sm: 2rem;
  --button-height-md: 2.5rem;
  --button-height-lg: 3rem;
  --button-padding-x-sm: var(--space-3);
  --button-padding-x-md: var(--space-4);
  --button-padding-x-lg: var(--space-6);
  --button-padding-y-sm: var(--space-2);
  --button-padding-y-md: var(--space-3);
  --button-padding-y-lg: var(--space-4);
  
  /* Application-specific functional variables */
  --c2-appbar-height: 90px;
  --bg-app: #FBFAF8;
  --app-bg-color: var(--color-warm-grey);
  --app-header-bg: var(--color-ivey-green);
  --app-header-text: var(--color-white);
  --app-user-color: var(--color-western-purple);
  --app-agent-color: var(--color-ivey-green);
  --app-system-color: var(--color-grey);
  --app-input-border: var(--color-light-warm-grey);
  --app-shadow: rgba(0, 0, 0, 0.1);
  
  /* Message colors */
  --message-user-bg: var(--color-white);
  --message-agent-bg: var(--color-white);
  --message-system-bg: transparent;
  
  /* Forms */
  --input-height: 2.75rem;
  --input-padding-x: var(--space-4);
  --input-padding-y: var(--space-3);
  --input-border-width: var(--border-thin);
  --input-focus-ring-width: 3px;
  --input-focus-ring-opacity: 0.2;
  
  /* Cards */
  --card-padding: var(--space-6);
  --card-radius: var(--radius-md);
  --card-shadow: var(--theme-shadow-medium);
  
  /* === BREAKPOINTS === */
  
  /* Mobile First Breakpoints */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === HIGH CONTRAST === */
@media (prefers-contrast: high) {
  :root {
    --theme-border-primary: var(--color-black);
    --theme-border-secondary: var(--color-black);
  }
}