/**
 * App theme — the `@layer theme` slot, loaded last and out-ranking everything
 * below it. Design tokens only; structural CSS lives in `app.css`.
 */

@layer theme {
  :root {
    --font-family-base:
      'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;

    --f4: 1rem;
    --f5: 0.875rem;
    --f6: 0.75rem;
    --f7: 0.625rem;

    --s5: 2rem;
    --s6: 3rem;

    --br-sm: 6px;
    --br-base: 10px;
    --br-lg: 20px;

    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    --primaryH: 207;
    --primaryS: 55%;
    --primaryL: 62%;

    --borderH: 207;
    --borderS: 55%;
    --borderL: 80%;
  }

  :root {
    --footer-height: 64px;
    --main-padding: 0;
  }

  html {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) m-map #map,
    :root:not([data-theme]) m-mini-map {
      background-color: hsl(220, 15%, 12%);
    }
  }

  :root[data-theme='dark'] m-map #map,
  :root[data-theme='dark'] m-mini-map {
    background-color: hsl(220, 15%, 12%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) m-map .maplibregl-ctrl-group,
    :root:not([data-theme]) m-map .maplibregl-ctrl-attrib,
    :root:not([data-theme]) m-mini-map .maplibregl-ctrl-group,
    :root:not([data-theme]) m-mini-map .maplibregl-ctrl-attrib {
      filter: invert(1) hue-rotate(180deg);
    }
  }

  :root[data-theme='dark'] m-map .maplibregl-ctrl-group,
  :root[data-theme='dark'] m-map .maplibregl-ctrl-attrib,
  :root[data-theme='dark'] m-mini-map .maplibregl-ctrl-group,
  :root[data-theme='dark'] m-mini-map .maplibregl-ctrl-attrib {
    filter: invert(1) hue-rotate(180deg);
  }
}