@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
:root {
  /* Content layers */
  --z-content-low: 10; /* Minor elevated content */
  --z-content: 20; /* Standard elevated content */
  --z-content-high: 30; /* Important content that needs prominence */

  /* Navigation layers */
  --z-nav-low: 100; /* Secondary navigation components */
  --z-nav: 200; /* Primary navigation bars */
  --z-nav-sticky: 300; /* Sticky navigation elements */

  /* Overlay layers */
  --z-overlay: 400;

  --z-spotlight: 1000; /* Tutorial spotlights/guided help */

  /* System layers */
  --z-critical: 2000; /* Critical system notifications */

  /* spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
}

:root {
  /* Light mode by default */
  --background: hsl(210, 20%, 98%);
  --foreground: hsl(222, 47%, 11%);

  --surface: hsl(210, 16%, 93%);
  --surface-foreground: hsl(222, 47%, 11%);
  --sidebar: hsl(210, 22%, 96%);
  --sidebar-foreground: hsl(222, 47%, 11%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222, 47%, 11%);
  --popup: hsl(0, 0%, 100%);
  --popup-foreground: hsl(222, 47%, 11%);
  --primary: hsl(174, 86%, 44%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(262, 83%, 58%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --accent: hsl(36, 100%, 65%);
  --accent-foreground: hsl(0, 0%, 100%);
  --muted: hsl(210, 14%, 89%);
  --muted-foreground: hsl(215, 16%, 47%);
  --success: hsl(142, 76%, 36%);
  --success-foreground: hsl(0, 0%, 100%);
  --error: hsl(0, 84%, 60%);
  --error-foreground: hsl(0, 0%, 100%);
  --warning: hsl(38, 92%, 50%);
  --warning-foreground: hsl(0, 0%, 100%);
  --info: hsl(200, 98%, 39%);
  --info-foreground: hsl(0, 0%, 100%);
  --info-hover: hsl(200, 98%, 35%);
  --info-active: hsl(200, 98%, 30%);

  /* Carpooling specific colors */
  --map-highlight: hsl(174, 86%, 44%, 0.2);
  --route-color: hsl(262, 83%, 58%);
  --driver-marker: hsl(174, 86%, 44%);
  --rider-marker: hsl(36, 100%, 65%);
  --available-seat: hsl(142, 76%, 36%, 0.2);
  --unavailable-seat: hsl(0, 84%, 60%, 0.2);

  --border: hsl(214, 32%, 91%);

  /* Font Families */
  --font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-family-monospace: 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --font-family-cursive: cursive;

  /* Border Radius and box shadows */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-focus: 0 0 0 3px hsla(174, 86%, 44%, 0.4);

  --radius-sm: 0.125rem;
  --radius: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px; 

  /* Animation */
  --animation-duration-fast: 150ms;
  --animation-duration-normal: 300ms;
  --animation-duration-slow: 500ms;

  /* Chart colors */
  --chart-color-1: hsl(174, 86%, 44%);
  --chart-color-2: hsl(262, 83%, 58%);
  --chart-color-3: hsl(36, 100%, 65%);
  --chart-color-4: hsl(142, 76%, 36%);
  --chart-color-5: hsl(200, 98%, 39%);

  /* Additional variables */
  --gradient-primary: linear-gradient(135deg, hsl(174, 86%, 44%), hsl(180, 86%, 50%));
  --gradient-secondary: linear-gradient(135deg, hsl(262, 83%, 58%), hsl(280, 83%, 65%));
  --backdrop-blur: blur(8px);
  --map-overlay: hsla(210, 20%, 98%, 0.8);
}

.dark {
  --background: hsl(222, 47%, 11%);
  --foreground: hsl(210, 40%, 98%);

  --surface: hsl(223, 47%, 14%);
  --surface-foreground: hsl(210, 40%, 98%);
  --sidebar: hsl(222, 47%, 9%);
  --sidebar-foreground: hsl(210, 40%, 98%);
  --card: hsl(224, 47%, 16%);
  --card-foreground: hsl(210, 40%, 98%);
  --popup: hsl(224, 47%, 16%);
  --popup-foreground: hsl(210, 40%, 98%);
  --primary: hsl(174, 86%, 44%);
  --primary-foreground: hsl(222, 47%, 11%);
  --secondary: hsl(262, 83%, 58%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --accent: hsl(36, 100%, 65%);
  --accent-foreground: hsl(222, 47%, 11%);
  --muted: hsl(223, 47%, 20%);
  --muted-foreground: hsl(215, 16%, 70%);
  --success: hsl(142, 76%, 36%);
  --success-foreground: hsl(0, 0%, 100%);
  --error: hsl(0, 84%, 60%);
  --error-foreground: hsl(0, 0%, 100%);
  --warning: hsl(38, 92%, 50%);
  --warning-foreground: hsl(0, 0%, 100%);
  --info: hsl(200, 98%, 50%);
  --info-foreground: hsl(0, 0%, 100%);
  --info-hover: hsl(200, 98%, 45%);
  --info-active: hsl(200, 98%, 40%);

  /* Carpooling specific colors */
  --map-highlight: hsl(174, 86%, 44%, 0.3);
  --route-color: hsl(262, 83%, 58%);
  --driver-marker: hsl(174, 86%, 44%);
  --rider-marker: hsl(36, 100%, 65%);
  --available-seat: hsl(142, 76%, 36%, 0.3);
  --unavailable-seat: hsl(0, 84%, 60%, 0.3);

  --border: hsl(223, 47%, 20%);

  /* Shadow adjustments for dark mode */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-focus: 0 0 0 3px hsla(174, 86%, 44%, 0.5);

  /* Additional variables */
  --map-overlay: hsla(222, 47%, 11%, 0.8);
}
@layer base {
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-family-base);
  }

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }


  button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  th, td {
    display: table-cell!important;
  }
}