:root{
  --route-blue: #0B5FA5;
  --route-blue-deep: #063C6B;
  --sky: #7FB2E5;
  --gpx-green: #1C8C6B;
  --amber: #F2A93B;
  --paper: #F3F5F6;
  --ink: #1A1D1F;
  --ink-soft: #55606A;
  --line: #D7DCDD;
  --white: #FFFFFF;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
}

:root[data-theme="dark"]{
  --paper: #14181B;
  --ink: #EDEFEF;
  --ink-soft: #A6AFB5;
  --line: #2B3236;
  --white: #1D2226;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --paper: #14181B;
    --ink: #EDEFEF;
    --ink-soft: #A6AFB5;
    --line: #2B3236;
    --white: #1D2226;
  }
}

*{ box-sizing: border-box; }

[hidden]{ display: none !important; }

html,body{
  margin:0; padding:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button{ font-family: inherit; }
a{ color: inherit; }

/* ---- Ortak buton bileşeni (site + panel her yerde) ---- */
.btn{
  height: 48px; border-radius: var(--radius-md); border: none;
  font-size: 14.5px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: transform .1s ease, background .15s ease;
}
.btn:active{ transform: scale(.98); }
.btn:focus-visible{ outline: 2px solid var(--route-blue); outline-offset: 2px; }
.btn-primary{ background: var(--route-blue); color: var(--white); }
.btn-primary:hover{ background: var(--route-blue-deep); }
.btn-ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover{ border-color: var(--route-blue); color: var(--route-blue); }