/* -------------------------------------------------------------------------- */
/* TaxiMate UI (Base Theme + Components)                                       */
/* This file intentionally owns: reset, theme tokens, typography, layout, UI   */
/* components used across index.html, txe.html, overhaul.html                   */
/* -------------------------------------------------------------------------- */

/* Establish cascade layer order across ALL stylesheets. */
@layer reset, theme, base, layout, components, features, utilities;

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

@layer theme {
  :root {
    /* Colors */
    --background: hsl(210, 20%, 98%);
    --foreground: hsl(220, 40%, 15%);
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(220, 40%, 15%);
    --primary: hsl(220, 70%, 20%);
    --primary-foreground: hsl(0, 0%, 100%);
    --secondary: hsl(210, 15%, 92%);
    --secondary-foreground: hsl(220, 40%, 15%);
    --muted: hsl(210, 15%, 92%);
    --muted-foreground: hsl(220, 20%, 50%);
    --accent: hsl(45, 95%, 55%);
    --accent-foreground: hsl(220, 40%, 15%);
    --border: hsl(220, 20%, 88%);

    /* Effects */
    --shadow-card: 0 4px 6px -1px hsl(220 20% 80% / 0.3),
      0 2px 4px -1px hsl(220 20% 80% / 0.2);
    --shadow-elevated: 0 10px 15px -3px hsl(220 20% 60% / 0.2),
      0 4px 6px -2px hsl(220 20% 60% / 0.1);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shared sizes */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-pill: 9999px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --background: hsl(220, 40%, 8%);
      --foreground: hsl(210, 20%, 95%);
      --card: hsl(220, 35%, 12%);
      --card-foreground: hsl(210, 20%, 95%);
      --primary: hsl(220, 70%, 55%);
      --primary-foreground: hsl(0, 0%, 100%);
      --secondary: hsl(220, 30%, 18%);
      --secondary-foreground: hsl(210, 20%, 95%);
      --muted: hsl(220, 30%, 18%);
      --muted-foreground: hsl(220, 15%, 65%);
      --accent: hsl(45, 95%, 55%);
      --accent-foreground: hsl(220, 40%, 10%);
      --border: hsl(220, 30%, 18%);
      --shadow-card: 0 4px 6px -1px hsl(220 40% 5% / 0.5),
        0 2px 4px -1px hsl(220 40% 5% / 0.4);
      --shadow-elevated: 0 10px 15px -3px hsl(220 40% 5% / 0.4),
        0 4px 6px -2px hsl(220 40% 5% / 0.3);
    }
  }
}

@layer base {
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    min-height: 100vh;
  }

  a {
    color: inherit;
    text-decoration-color: color-mix(in hsl, var(--foreground), transparent 60%);
    text-underline-offset: 0.15em;
  }

  a:hover {
    text-decoration-color: currentColor;
  }

  /* Basic typography for pages like txe.html / overhaul.html */
  h1,
  h2,
  h3 {
    line-height: 1.25;
    margin: 1rem 0 0.75rem;
    color: var(--foreground);
  }

  h1 {
    font-size: 1.75rem;
    font-weight: 800;
  }
  h2 {
    font-size: 1.5rem;
    font-weight: 800;
  }
  h3 {
    font-size: 1.125rem;
    font-weight: 700;
  }

  ul {
    padding-left: 1.25rem;
  }

  li {
    margin: 0.25rem 0;
  }
}

@layer layout {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .main-content {
    padding: 3rem 1rem;
  }

  .section {
    margin-bottom: 3rem;
  }

  /* Grid Layouts */
  .grid {
    display: grid;
    gap: 1.5rem;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

@layer components {
  /* Header */
  .header {
    background: linear-gradient(135deg, var(--primary), hsl(220, 60%, 30%));
    color: var(--primary-foreground);
    box-shadow: var(--shadow-elevated);
    padding: 1.5rem 0;
  }

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .header-icon {
    width: 32px;
    height: 32px;
  }

  .header-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
  }

  .header-subtitle {
    font-size: 0.875rem;
    opacity: 0.85;
    margin: 0;
  }

  .header-right {
    text-align: right;
  }

  .time-label {
    font-size: 0.875rem;
    opacity: 0.85;
  }

  .time-display {
    font-size: 1.25rem;
    font-weight: 700;
  }

  /* Hero Section */
  .hero {
    background-color: var(--secondary);
    padding: 3rem 0;
    text-align: center;
  }

  .hero-title {
    font-size: 1.875rem;
    font-weight: 800;
    margin: 0 0 1rem;
    color: var(--foreground);
  }

  .hero-subtitle {
    font-size: 1.125rem;
    color: var(--muted-foreground);
    max-width: 42rem;
    margin: 0 auto;
  }

  .section-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--foreground);
  }

  .section-icon {
    width: 24px;
    height: 24px;
  }

  .section-icon.accent {
    color: var(--accent);
  }

  .section-icon.primary {
    color: var(--primary);
  }

  /* Info Cards */
  .info-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
  }

  .info-card:hover {
    box-shadow: var(--shadow-elevated);
  }

  .card-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .icon-container {
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .icon-container.primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }

  .icon-container.accent {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  .icon-container svg {
    width: 24px;
    height: 24px;
  }

  .card-title-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
  }

  .live-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    background-color: color-mix(in hsl, var(--accent), transparent 80%);
    color: var(--accent-foreground);
    font-weight: 700;
  }

  .time-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    background-color: color-mix(in hsl, var(--muted), transparent 60%);
    color: var(--muted-foreground);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .card-content {
    color: var(--muted-foreground);
  }

  .card-list {
    list-style: none;
    padding-left: 0;
    font-size: 0.875rem;
  }

  .card-list li {
    margin-bottom: 0.5rem;
  }

  /* Weather Specific */
  .weather-temp {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
  }

  .weather-advice {
    font-size: 0.875rem;
  }

  /* Hotspots */
  .hotspot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .hotspot-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .hotspot-info p {
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.25rem;
  }

  .hotspot-eta {
    font-size: 0.875rem;
  }

  .demand-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
  }

  .demand-high {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }

  .demand-medium {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
  }

  /* Quick Actions */
  .quick-actions {
    background-color: var(--card);
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
  }

  .quick-actions-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--foreground);
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    user-select: none;
  }

  .btn svg {
    width: 16px;
    height: 16px;
  }

  .btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }

  .btn-primary:hover {
    opacity: 0.92;
  }

  .btn-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border-color: var(--border);
  }

  .btn-secondary:hover {
    opacity: 0.92;
  }

  /* Footer */
  .footer {
    background-color: var(--secondary);
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    margin-top: 4rem;
  }

  .footer-text {
    text-align: center;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }

  /* Small screens */
  @media (max-width: 640px) {
    .header-right {
      display: none;
    }

    .hero-title {
      font-size: 1.5rem;
    }

    .hero-subtitle {
      font-size: 1rem;
    }
  }
}