/* ---- Theme tokens. Only --bg, --fg and --accent are set per theme; every other
   surface, line and text shade is mixed from them, so dark, light and custom
   themes stay consistent everywhere (site, login, app, maps). ---- */
:root{
  --bg:#0D0F10; --fg:#ECE9E2; --accent:#F26B1D; --accent-ink:#0D0F10;
  --accent-hi:color-mix(in srgb, var(--accent) 86%, #fff);
  --bg-deep:color-mix(in srgb, var(--bg) 72%, #000);
  --field:color-mix(in srgb, var(--fg) 1.5%, var(--bg));
  --panel:color-mix(in srgb, var(--fg) 3.5%, var(--bg));
  --panel-2:color-mix(in srgb, var(--fg) 7%, var(--bg));
  --panel-3:color-mix(in srgb, var(--fg) 10%, var(--bg));
  --line:color-mix(in srgb, var(--fg) 11.5%, var(--bg));
  --tile:color-mix(in srgb, var(--fg) 14%, var(--bg));
  --line-2:color-mix(in srgb, var(--fg) 21%, var(--bg));
  --line-3:color-mix(in srgb, var(--fg) 28%, var(--bg));
  --dim-2:color-mix(in srgb, var(--fg) 45%, var(--bg));
  --dim:color-mix(in srgb, var(--fg) 57%, var(--bg));
  --muted:color-mix(in srgb, var(--fg) 79%, var(--bg));
  --accent-soft:color-mix(in srgb, var(--accent) 14%, transparent);
  --error:color-mix(in srgb, var(--accent) 70%, #ff3b3b);
  --shadow:#000;
  --font-display:'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body:'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r-panel:14px; --r-inner:8px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
:root[data-mode="light"]{ color-scheme:light; --shadow:color-mix(in srgb, #3b342c 38%, transparent); }
html{background:var(--bg);transition:background-color .5s var(--ease)}
body{transition:background-color .5s var(--ease),color .5s var(--ease)}
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),fill .45s var(--ease),stroke .45s var(--ease)!important}

/* theme picker (site nav + app header) */
.th-btn{position:relative}
.th-pop{position:absolute;right:0;top:calc(100% + 10px);width:280px;z-index:90;background:var(--panel);border-radius:var(--r-panel);box-shadow:inset 0 0 0 1px var(--line-2),0 24px 60px -20px color-mix(in srgb,var(--shadow) 80%,transparent);padding:14px;display:flex;flex-direction:column;gap:12px;text-align:left;color:var(--fg)}
.th-pop h4{font-size:15px;letter-spacing:-.01em}
.th-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.th-modes button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:0;border-radius:10px;background:var(--field);color:var(--muted);font:600 12.5px/1 var(--font-body);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.th-modes button[aria-pressed="true"]{color:var(--fg);box-shadow:inset 0 0 0 2px var(--accent)}
.th-modes .sw{width:100%;height:28px;border-radius:6px;display:flex;overflow:hidden}
.th-modes .sw i{flex:1}
.th-custom{display:flex;flex-direction:column;gap:10px}
.th-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--muted)}
.th-row input[type=color]{width:44px;height:30px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer}
.th-presets{display:flex;gap:6px;flex-wrap:wrap}
.th-presets button{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 2px var(--line-2);position:relative;overflow:hidden}
.th-presets button i{position:absolute;inset:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.th-note{font-size:12px;color:var(--dim);line-height:1.45}
.th-pop .btn{height:38px;font-size:14px}