/**
 * Design Tokens for Amsterdam Day Trips Website
 * Generated from places.json category colors
 */

:root {
  /* ======================
     Category Colors
     ====================== */
  --color-bike: #4CAF50;
  --color-bike-light: #81C784;
  --color-bike-dark: #388E3C;

  --color-train: #2196F3;
  --color-train-light: #64B5F6;
  --color-train-dark: #1976D2;

  --color-car: #FF9800;
  --color-car-light: #FFB74D;
  --color-car-dark: #F57C00;

  --color-museum: #9C27B0;
  --color-museum-light: #BA68C8;
  --color-museum-dark: #7B1FA2;

  /* ======================
     Neutral Colors
     ====================== */
  --color-bg: #FAFAFA;
  --color-bg-card: #FFFFFF;
  --color-bg-sidebar: #FFFFFF;
  --color-bg-popup: #FFFFFF;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);

  --color-text: #212121;
  --color-text-secondary: #757575;
  --color-text-muted: #9E9E9E;
  --color-text-inverse: #FFFFFF;

  --color-border: #E0E0E0;
  --color-border-light: #EEEEEE;

  --color-link: #1976D2;
  --color-link-hover: #1565C0;

  /* ======================
     Typography
     ====================== */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* Font Sizes - Mobile First */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ======================
     Spacing
     ====================== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ======================
     Layout
     ====================== */
  --sidebar-width: 360px;
  --sidebar-width-collapsed: 0px;
  --header-height: 56px;
  --popup-max-width: 320px;
  --card-max-width: 400px;
  --touch-target-min: 44px;

  /* Breakpoints (for reference in media queries) */
  /* --breakpoint-sm: 640px; */
  /* --breakpoint-md: 768px; */
  /* --breakpoint-lg: 1024px; */
  /* --breakpoint-xl: 1280px; */

  /* ======================
     Border Radius
     ====================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ======================
     Shadows
     ====================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-popup: 0 3px 14px rgba(0, 0, 0, 0.2);
  --shadow-sidebar: 2px 0 8px rgba(0, 0, 0, 0.1);

  /* ======================
     Transitions
     ====================== */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* ======================
     Z-Index Scale
     ====================== */
  --z-base: 0;
  --z-sidebar: 100;
  --z-header: 200;
  --z-popup: 300;
  --z-modal: 400;
  --z-overlay: 500;
  --z-toast: 600;

  /* ======================
     Map Specific
     ====================== */
  --marker-size: 24px;
  --marker-size-active: 32px;
  --cluster-size: 40px;
}

/* ======================
   Component Specs (CSS Comments)
   ====================== */

/*
 * SIDEBAR COMPONENT
 * -----------------
 * Width: var(--sidebar-width) on desktop, full width on mobile
 * Background: var(--color-bg-sidebar)
 * Shadow: var(--shadow-sidebar)
 * Position: Fixed left, full height
 * Scrollable: Overflow-y auto
 * Mobile: Slides in from left with overlay
 *
 * Structure:
 * .sidebar
 *   .sidebar__header (logo, title, toggle button)
 *   .sidebar__filters (category checkboxes)
 *   .sidebar__list (place items grouped by category)
 *     .category-group
 *       .category-group__header
 *       .place-item (clickable, min-height: var(--touch-target-min))
 */

/*
 * PLACE CARD COMPONENT
 * --------------------
 * Background: var(--color-bg-card)
 * Border-radius: var(--radius-md)
 * Shadow: var(--shadow-sm) → var(--shadow-md) on hover
 * Padding: var(--space-4)
 *
 * Structure:
 * .place-item
 *   .place-item__image (aspect-ratio: 16/9, lazy loading)
 *   .place-item__content
 *     .place-item__name (font-weight: semibold)
 *     .place-item__summary (color: text-secondary, truncate 2 lines)
 *     .place-item__meta (time, category icon)
 *
 * States:
 * :hover - shadow-md, slight scale
 * .place-item--active - border-left with category color
 */

/*
 * MAP POPUP COMPONENT
 * -------------------
 * Max-width: var(--popup-max-width)
 * Background: var(--color-bg-popup)
 * Border-radius: var(--radius-md)
 * Shadow: var(--shadow-popup)
 *
 * Structure:
 * .leaflet-popup-content
 *   .popup
 *     .popup__image (aspect-ratio: 16/9)
 *     .popup__body
 *       .popup__title
 *       .popup__summary
 *       .popup__meta (time, tips)
 *       .popup__actions
 *         .popup__gmaps-link (Google Maps button)
 *         .popup__details-btn (Expand for POIs)
 */

/*
 * CATEGORY FILTER COMPONENT
 * -------------------------
 * Display: Flex, wrap
 * Gap: var(--space-2)
 *
 * Structure:
 * .filters
 *   .filter-chip (checkbox styled as chip)
 *     input[type="checkbox"] (visually hidden)
 *     .filter-chip__label
 *       .filter-chip__icon (emoji)
 *       .filter-chip__name
 *
 * States:
 * :checked - background uses category color
 * :hover - slight background change
 * :focus-visible - focus ring
 */

/*
 * MARKER COMPONENT (Leaflet Custom)
 * ---------------------------------
 * Size: var(--marker-size)
 * Border-radius: var(--radius-full)
 * Border: 2px solid white
 * Background: category color
 *
 * States:
 * .marker--active - size increases, shadow
 */

/*
 * MOBILE RESPONSIVE BEHAVIOR
 * --------------------------
 * Below 768px:
 * - Sidebar: Hidden by default, toggle button visible
 * - Sidebar open: Full screen overlay, slide from left
 * - Map: Full viewport
 * - Popup: Bottom sheet style (optional enhancement)
 * - Touch targets: Minimum 44px
 * - Swipe: Close sidebar on swipe left (optional)
 */