/*
Migration notes:
- Adds design tokens and component classes under CSS Cascade Layers.
- Existing button classes (.size-btn, .toggle-btn, .day-btn, #add-pub-btn) now inherit `.btn` styles.
- Panels (#map-controls, #bottom-controls, #charts-section, .chart-wrapper, .pub-list) share the `.card` look.

 - Price bubbles use a price-based color gradient (pink→orange) indicating cheaper to more expensive. `.price-bubble.happy-hour` shows an "HH" tag.

- Remove `background-attachment: fixed;` from `body` in style.css.
- To use the mobile bottom sheet include bottom-sheet.css/js and the markup snippet shown in the README.
*/

@layer tokens {
  :root {
    /* colors */
    --surface-1: #1b1d23;
    --surface-2: #22252b;
    --surface-3: #2a2e35;
    --border: #3a3f47;
    --text: #e4e6eb;
    --text-strong: #ffffff;
    --accent: #f5c518;
    --accent-fg: #1b1b1b;
    --brand: #2b6cb0;
    --success: #2f9e44;
    --warning: #e8590c;

    /* radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 9999px;

    /* elevation */
    --elev-1: 0 1px 2px rgba(0,0,0,0.15);
    --elev-2: 0 2px 4px rgba(0,0,0,0.2);
    --elev-3: 0 4px 12px rgba(0,0,0,0.25);

    /* spacing */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;

    /* typography */
    --font-sans: 'Open Sans', 'Helvetica', Arial, sans-serif;
  }
}

@layer base {
  html {
    font-family: var(--font-sans);
    font-size: clamp(16px, 1.5vw + 0.5rem, 18px);
    color: var(--text);
    background: var(--surface-1);
  }
  body {
    background: var(--surface-1);
    color: var(--text);
  }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .beer-price,
  .price {
    font-variant-numeric: tabular-nums;
  }
  @media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }
}

@layer components {
  /* cards */
  .card,
  #map-controls,
  #bottom-controls,
  #charts-section,
  .chart-wrapper,
  .pub-list {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-1);
    padding: var(--sp-4);
  }
  .pub-list li { min-height: 44px; }

  /* buttons */
  .btn,
  .size-btn,
  .toggle-btn,
  .day-btn,
  #add-pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    min-height: 44px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  }
  .btn--primary,
  #add-pub-btn {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
  }
  .btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text);
  }
  .btn:hover,
  .size-btn:hover,
  .toggle-btn:hover,
  .day-btn:hover,
  #add-pub-btn:hover {
    background: var(--surface-3);
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
  }
  @media (hover: none) {
    .btn:hover,
    .size-btn:hover,
    .toggle-btn:hover,
    .day-btn:hover,
    #add-pub-btn:hover {
      background: var(--surface-2);
      box-shadow: none;
      transform: none;
    }
  }

  /* chips */
  .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--sp-3);
    min-height: 44px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
  }
  .chip--reset {
    border-style: dashed;
  }

  /* price bubbles */
  .price-bubble {
    position: relative;
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-strong);
    box-shadow: var(--elev-1);
    font-variant-numeric: tabular-nums;
  }
  .price-bubble.unavailable {
    background: var(--surface-3);
    color: var(--text);
  }
  .price-bubble.happy-hour::after {
    content: "HH";
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(25%, -25%);
    background: var(--accent);
    color: var(--accent-fg);
    padding: 0 var(--sp-1);
    border-radius: var(--radius-sm);
    box-shadow: var(--elev-1);
    font-size: 0.65em;
  }
  .price-bubble.value-up::before {
    content: "▲";
    margin-right: 2px;
  }
  .price-bubble.value-down::before {
    content: "▼";
    margin-right: 2px;
  }

  .bubble-wrapper {
    position: relative;
    display: inline-block;
  }
  .old-price {
    position: absolute;
    top: -6px;
    left: -6px;
    font-size: 0.75rem;
  }

  /* beer table */
  .beer-table {
    width: 100%;
    border-collapse: collapse;
  }
  .beer-table th,
  .beer-table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
  }
  .beer-table tr:last-child td,
  .beer-table tr:last-child th {
    border-bottom: none;
  }
  .beer-price {
    text-align: right;
  }

  /* containers for queries */
  #map-controls,
  #bottom-controls,
  #charts-section {
    container-type: inline-size;
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .text-center { text-align: center; }
}