/**
 * Routal Design System v5 - Color Palette
 * CSS Custom Properties for consistent theming
 *
 * Values follow the design system scale; the variable names are kept from the
 * previous palette so palette.ts and the map icons keep working untouched.
 */

:root {
  /* Primary Colors - green */
  --routal-primary-00: #8de8b5; /* primary/300 */
  --routal-primary-20: #209955; /* primary/600, hover */
  --routal-primary-20n: #bff3d5; /* primary/200, fills */
  --routal-primary-40: #29a861; /* primary/500, brand */
  --routal-primary-70: #1c7946; /* primary/700, brand text */
  --routal-primary-60: #0f3a23; /* primary/900, dark surfaces */

  /* Secondary Colors */
  --routal-secondary-00: #9e9e9e; /* neutral/600 */
  --routal-secondary-40: #4d4d4d; /* neutral/700 */

  /* Status Colors */
  --routal-success-ultraLight: #f1fcf5;
  --routal-success-light: #bff3d5;
  --routal-success-medium: #29a861;
  --routal-success-dark: #1b603a;

  --routal-incomplete-light: #fbcc77;
  --routal-incomplete-medium: #f0a51b;
  --routal-incomplete-dark: #a3680e;

  --routal-error-ultraLight: #fdecea;
  --routal-error-light: #f59990;
  --routal-error-medium: #d62c20;
  --routal-error-dark: #8a1c13;

  --routal-warning-medium: #f0a51b;

  /* 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;
  --routal-neutral-80: #262626; /* neutral/800, primary text */

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

  /* Marker Stop Colors */
  --routal-marker-completed: #29a861;
  --routal-marker-canceled: #d62c20;
  --routal-marker-incomplete: #9e9e9e;
}

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