/* 
 * Color System - Cefalo Design System
 * Based on Figma Design: https://www.figma.com/design/NxQd63rZaGUxuFnfMlAGeY/Cefalo-Design
 * 
 * Colors are organized by category for easy reference and maintenance
 */

:root {
  /* ============================================
     TEXT COLORS
     ============================================ */
  
  /* Primary Text Colors */
  --color-text-primary: #001831;
  --color-text-secondary: #878787;
  --color-text-white: #f5f5f5;
  
  /* Text Color Aliases */
  --color-text-default: var(--color-text-primary);
  --color-text-muted: var(--color-text-secondary);
  --color-text-inverse: var(--color-text-white);

  /* ============================================
     BACKGROUND COLORS
     ============================================ */
  
  /* Primary Backgrounds */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-dark: #212121;
  
  /* Footer Backgrounds */
  --color-bg-footer-top: #002448;
  --color-bg-footer-bottom: #001b36;
  
  /* Background Color Aliases */
  --color-bg-default: var(--color-bg-primary);
  --color-bg-container: var(--color-bg-primary);
  --color-bg-surface: var(--color-bg-secondary);

  /* ============================================
     ACCENT COLORS
     ============================================ */
  
  /* Primary Accent (Green) */
  --color-accent-primary: #6ae0ad;
  --color-accent-primary-hover: #7ae8bd;
  --color-accent-primary-light: #8af0cd;
  --color-accent-primary-dark: #5ad09d;
  
  /* Accent Color Aliases */
  --color-accent: var(--color-accent-primary);
  --color-accent-hover: var(--color-accent-primary-hover);

  /* ============================================
     ACTION COLORS
     ============================================ */
  
  /* Primary Action */
  --color-action-primary: #212121;
  --color-action-primary-hover: #333333;
  --color-action-primary-active: #000000;
  
  /* Secondary Action */
  --color-action-secondary: #ffffff;
  --color-action-secondary-hover: #f5f5f5;
  --color-action-secondary-active: #e0e0e0;
  
  /* Action Color Aliases */
  --color-button-primary: var(--color-action-primary);
  --color-button-primary-hover: var(--color-action-primary-hover);
  --color-button-secondary: var(--color-action-secondary);
  --color-button-secondary-hover: var(--color-action-secondary-hover);

  /* ============================================
     BORDER/STROKE COLORS
     ============================================ */
  
  /* Primary Borders */
  --color-border-primary: #666666;
  --color-border-secondary: #e0e0e0;
  --color-border-light: #f0f0f0;
  --color-border-dark: #333333;
  
  /* Border Color Aliases */
  --color-stroke-primary: var(--color-border-primary);
  --color-border-default: var(--color-border-secondary);
  --color-border-muted: var(--color-border-light);

  /* ============================================
     STATE COLORS
     ============================================ */
  
  /* Success */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-success-dark: #059669;
  
  /* Error */
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-error-dark: #dc2626;
  
  /* Warning */
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #d97706;
  
  /* Info */
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #2563eb;

  /* ============================================
     NEUTRAL COLORS
     ============================================ */
  
  /* Grayscale */
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;
  
  /* Neutral Aliases */
  --color-gray-50: var(--color-neutral-50);
  --color-gray-100: var(--color-neutral-100);
  --color-gray-200: var(--color-neutral-200);
  --color-gray-300: var(--color-neutral-300);
  --color-gray-400: var(--color-neutral-400);
  --color-gray-500: var(--color-neutral-500);
  --color-gray-600: var(--color-neutral-600);
  --color-gray-700: var(--color-neutral-700);
  --color-gray-800: var(--color-neutral-800);
  --color-gray-900: var(--color-neutral-900);
}

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

/* Text Color Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-white { color: var(--color-text-white); }
.text-muted { color: var(--color-text-secondary); }
.text-inverse { color: var(--color-text-white); }

/* Background Color Utilities */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-dark { background-color: var(--color-bg-dark); }
.bg-footer-top { background-color: var(--color-bg-footer-top); }
.bg-footer-bottom { background-color: var(--color-bg-footer-bottom); }

/* Accent Color Utilities */
.text-accent { color: var(--color-accent-primary); }
.bg-accent { background-color: var(--color-accent-primary); }
.border-accent { border-color: var(--color-accent-primary); }

/* Action Color Utilities */
.bg-action-primary { background-color: var(--color-action-primary); }
.bg-action-secondary { background-color: var(--color-action-secondary); }
.text-action-primary { color: var(--color-action-primary); }
.text-action-secondary { color: var(--color-action-secondary); }

/* Border Color Utilities */
.border-primary { border-color: var(--color-border-primary); }
.border-secondary { border-color: var(--color-border-secondary); }
.border-light { border-color: var(--color-border-light); }
.border-dark { border-color: var(--color-border-dark); }

/* State Color Utilities */
.text-success { color: var(--color-success); }
.bg-success { background-color: var(--color-success); }
.border-success { border-color: var(--color-success); }

.text-error { color: var(--color-error); }
.bg-error { background-color: var(--color-error); }
.border-error { border-color: var(--color-error); }

.text-warning { color: var(--color-warning); }
.bg-warning { background-color: var(--color-warning); }
.border-warning { border-color: var(--color-warning); }

.text-info { color: var(--color-info); }
.bg-info { background-color: var(--color-info); }
.border-info { border-color: var(--color-info); }