/**
 * Routal Design System - Color Palette
 * CSS Custom Properties for consistent theming
 */

:root {
  /* Primary Colors */
  --routal-primary-00: #90b1aa;
  --routal-primary-20: #678e89;
  --routal-primary-20n: #bcd3cb;
  --routal-primary-40: #406867;
  --routal-primary-60: #003639;

  /* Secondary Colors */
  --routal-secondary-00: #9aa5af;
  --routal-secondary-40: #3e4959;

  /* Status Colors */
  --routal-success-ultraLight: #f2fff6;
  --routal-success-light: #c4e8cf;
  --routal-success-medium: #00bf8f;
  --routal-success-dark: #007558;

  --routal-incomplete-light: #fed7ae;
  --routal-incomplete-medium: #f0a51b;
  --routal-incomplete-dark: #bf851a;

  --routal-error-ultraLight: #ffe4e2;
  --routal-error-light: #f8a19b;
  --routal-error-medium: #d62c20;
  --routal-error-dark: #8a1e17;

  --routal-warning-medium: #e29c0c;

  /* Neutral Colors */
  --routal-neutral-00: #ffffff;
  --routal-neutral-02: #f5f5f5;
  --routal-neutral-05: #eeeeee;
  --routal-neutral-10: #d9d9d9;
  --routal-neutral-20: #bebebe;
  --routal-neutral-40: #4d4d4d;

  /* Semantic Colors */
  --routal-white: #ffffff;
  --routal-old-white: #f9fafb;

  /* Marker Stop Colors */
  --routal-marker-completed: #00bf8f;
  --routal-marker-canceled: #d62c20;
  --routal-marker-incomplete: #9aa5af;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override colors for dark mode if needed */
    /* --routal-neutral-00: #1a1a1a; */
  }
}