/*---------------------------------------
  LONDON MAP COLOR SYSTEM
  Integrated with main color system: color-themes.css
-----------------------------------------*/

:root {
  /* Map Region Colors - Using centralized color system */
  --map-central-color: var(--map-central, #e74c3c);     /* Deep red */
  --map-north-color: var(--map-north, #f39c12);        /* Golden orange */
  --map-south-color: var(--map-south, #27ae60);        /* Dark green */
  --map-east-color: var(--map-east, #fdcb6e);         /* Golden yellow */
  --map-west-color: var(--map-west, #f65129);         /* Primary orange */
  --map-northwest-color: var(--map-northwest, #00a05d); /* Success green */
  --map-northeast-color: var(--map-northeast, #ffd74f); /* Primary yellow */
  --map-southwest-color: var(--map-southwest, #ff6b42); /* Light orange */
  --map-southeast-color: var(--map-southeast, #dd4824); /* Dark orange */

  /* Map UI Colors - Using centralized system */
  --map-text-primary: var(--map-text-primary, #2c3e50);      /* Headings */
  --map-text-secondary: var(--map-text-secondary, #717275);  /* Secondary text */
  --map-accent-color: var(--map-accent, #00a05d);            /* Links and highlights */
  --map-gray-overlay: var(--map-overlay, #b0b0b0);           /* Outside London areas */
  --map-popup-bg: var(--map-popup-bg, #ffffff);              /* Popup background */

  /* Map Element Colors - Using centralized system */
  --map-polygon-default: var(--map-border, #2196F3);         /* Default polygon border */
  --map-hover-fill: var(--map-hover-fill, #fda12b);          /* Orange fill on hover */
  --map-hover-border: var(--map-hover-border, #ff8c00);      /* Orange border on hover */
  --map-landmark-fill: var(--map-landmark-fill, #2c3e50);    /* Landmark marker fill */
  --map-landmark-border: var(--map-landmark-border, #ffffff); /* Landmark marker border */
  --map-london-border: var(--map-border, #999999);           /* Greater London border color */

  /* Legacy aliases for backward compatibility */
  --map-nw-color: var(--map-northwest-color);
  --map-ne-color: var(--map-northeast-color);
  --map-sw-color: var(--map-southwest-color);
  --map-se-color: var(--map-southeast-color);
}

/*=====================================
  THEME-SPECIFIC MAP COLORS
=====================================*/

/* Blue Theme Map Colors */
.theme-blue {
  --map-central: #0056b3;
  --map-north: #0066cc;
  --map-south: #004085;
  --map-east: #1a75ff;
  --map-west: #004499;
  --map-northwest: #003d82;
  --map-northeast: #66b3ff;
  --map-southwest: #3399ff;
  --map-southeast: #002244;
}

/* Green Theme Map Colors */
.theme-green {
  --map-central: #155724;
  --map-north: #28a745;
  --map-south: #0f5132;
  --map-east: #34ce57;
  --map-west: #1e7e34;
  --map-northwest: #0d6efd;
  --map-northeast: #6bb85d;
  --map-southwest: #20c997;
  --map-southeast: #087f5b;
}

/* Dark Theme Map Colors */
.theme-dark {
  --map-text-primary: #ffffff;
  --map-text-secondary: #cccccc;
  --map-popup-bg: #2d2d2d;
  --map-gray-overlay: #666666;
  --map-hover-fill: #ffd74f;
  --map-hover-border: #e6c24a;

  --map-central: #cc5555;
  --map-north: #dda15e;
  --map-south: #606c38;
  --map-east: #fcca46;
  --map-west: #bc4749;
  --map-northwest: #283618;
  --map-northeast: #fdd835;
  --map-southwest: #f77f00;
  --map-southeast: #d62828;
}