/* ===== CSS VARIABLES - CENTRALIZED DEFINITIONS ===== */
/* All CSS custom properties defined in one place for maintainability */
/* Follows CSS Guidelines for centralized color system and responsive breakpoints */

/* ===== RESPONSIVE BREAKPOINTS ===== */
:root {
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  --breakpoint-xxxl: 1800px;
}

/* ===== SPACING SYSTEM - GUIDELINES COMPLIANCE ===== */
/* All spacing follows 4px, 8px, 16px, 24px, 32px increments */
:root {
  --space-xxs: 4px;    /* 0.25rem */
  --space-xs: 8px;     /* 0.5rem */
  --space-sm: 16px;    /* 1rem */
  --space-md: 24px;    /* 1.5rem */
  --space-lg: 32px;    /* 2rem */
  
  /* Legacy spacing variables for backward compatibility */
  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-lg);
  --spacing-xxl: 48px;  /* 3rem - for larger containers */
  --spacing-xxxl: 64px; /* 4rem - for largest containers */
}

/* ===== COLOR PALETTE - GREEN TONES ===== */
:root {
  --color-green-light: #77B69B;
  --color-green-medium: #4A9877;
  --color-green-dark: #2A7D59;
  --color-green-darker: #146543;
  --color-green-darkest: #02472A;
  
  /* Alternative naming for compatibility */
  --green-1: #77B69B;
  --green-2: #4A9877;
  --green-3: #2A7D59;
  --green-4: #146543;
  --green-5: #02472A;
}

/* ===== COLOR PALETTE - BLUE TONES ===== */
:root {
  --color-blue-light: #7594AC;
  --color-blue-medium: #4A718F;
  --color-blue-dark: #2C5675;
  --color-blue-darker: #18405F;
  --color-blue-darkest: #062943;
  
  /* Alternative naming for compatibility */
  --blue-1: #7594AC;
  --blue-2: #4A718F;
  --blue-3: #2C5675;
  --blue-4: #18405F;
  --blue-5: #062943;
}

/* ===== COLOR PALETTE - YELLOW/BROWN ACCENTS ===== */
:root {
  --color-yellow-light: #FFD9A7;
  --color-yellow-medium: #DEAD6C;
  --color-yellow-dark: #B6823D;
  --color-yellow-darker: #94611D;
  --color-yellow-darkest: #683D03;
  
  /* Alternative naming for compatibility */
  --yellow-1: #FFD9A7;
  --yellow-2: #DEAD6C;
  --yellow-3: #B6823D;
  --yellow-4: #94611D;
  --yellow-5: #683D03;
}

/* ===== COLOR PALETTE - RED/ORANGE ACCENTS ===== */
:root {
  --color-red-light: #FFC0A7;
  --color-red-medium: #DE8C6C;
  --color-red-dark: #B6603D;
  --color-red-darker: #943F1D;
  --color-red-darkest: #682003;
  
  /* Alternative naming for compatibility */
  --red-1: #FFC0A7;
  --red-2: #DE8C6C;
  --red-3: #B6603D;
  --red-4: #943F1D;
  --red-5: #682003;
}

/* ===== SEMANTIC COLOR MAPPINGS ===== */
:root {
  --color-primary: var(--color-blue-medium);
  --color-secondary: var(--color-green-medium);
  --color-accent: var(--color-yellow-medium);
  --color-text: var(--color-blue-darkest);
  --color-text-light: var(--color-blue-light);
  --color-background: #ffffff;
  --color-background-dark: var(--color-blue-darkest);
}

/* ===== SHADOW SYSTEM ===== */
:root {
  --shadow-sm: 0 2px 4px rgba(6, 41, 67, 0.1);
  --shadow-md: 0 4px 15px rgba(6, 41, 67, 0.15);
  --shadow-lg: 0 8px 25px rgba(6, 41, 67, 0.2);
  --shadow-xl: 0 12px 40px rgba(6, 41, 67, 0.25);
}

/* ===== BORDER RADIUS SYSTEM ===== */
:root {
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
}

/* ===== TRANSITION SYSTEM ===== */
:root {
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ===== Z-INDEX SYSTEM ===== */
:root {
  --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;
}

/* ===== DARK THEME VARIABLES ===== */
[data-theme="dark"] {
  /* Dark Theme Background Colors */
  --bg-primary: var(--color-blue-darkest);
  --bg-secondary: var(--color-blue-darker);
  --bg-tertiary: var(--color-blue-dark);
  --bg-accent: var(--color-green-darkest);

  /* Dark Theme Text Colors */
  --text-primary: var(--color-yellow-light);
  --text-secondary: var(--color-green-light);
  --text-muted: var(--color-yellow-medium);
  --text-accent: var(--color-red-light);

  /* Dark Theme Border Colors */
  --border-primary: var(--color-blue-medium);
  --border-secondary: var(--color-green-dark);
  --border-accent: var(--color-yellow-medium);

  /* Dark Theme Shadow Colors */
  --shadow-primary: rgba(6, 41, 67, 0.3);
  --shadow-secondary: rgba(2, 71, 42, 0.3);
  --shadow-accent: rgba(182, 130, 61, 0.3);

  /* Override semantic colors for dark theme */
  --color-background: var(--color-blue-darkest);
  --color-text: var(--color-yellow-light);
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: high) {
  :root {
    --color-green-light: #02472A;
    --color-blue-light: #062943;
    --color-yellow-light: #ffffff;
    --color-red-light: #ffffff;
  }
  
  [data-theme="dark"] {
    --text-primary: #ffffff;
    --bg-primary: #000000;
    --border-primary: #ffffff;
  }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-normal: 0s;
    --transition-slow: 0s;
  }
}