/* Scrapnook design tokens (lifted from the card #18 prototype).
   One teal accent does all the pointing; photos are the hero; the map is the
   only painted surface. Light and dark are real themes, not an afterthought. */
:root{
  --bg:#f2f3f5; --surface:#ffffff; --surface2:#e9ebee; --surface3:#dde0e5;
  --fg:#101216; --fg2:#5d6472; --fg3:#8b92a0;
  --line:rgba(16,18,22,.09); --line2:rgba(16,18,22,.18);
  --accent:#0f7f8c; --accent-soft:rgba(15,127,140,.12); --on-accent:#ffffff;
  --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.88);
  --shadow:0 1px 2px rgba(16,18,22,.06),0 14px 36px rgba(16,18,22,.14);
  --shadow-sm:0 1px 2px rgba(16,18,22,.08),0 4px 12px rgba(16,18,22,.08);
  --danger:#d64550; --danger-soft:rgba(214,69,80,.12); --ok:#2e9e62; --ok-soft:rgba(46,158,98,.12); --warn:#c9841a; --warn-soft:rgba(201,132,26,.14);
  --tile:#e3e5e9; --on-photo:#ffffff; --scrim:rgba(0,0,0,.55); --story-bg:#000000;
  --map-paper:#e9eeef; --map-land:#cfd6c9; --map-ink:#2a2f36; --map-grain:.14; --map-halo:#eef1f1; --map-sea:#e4ebee;
  --trip-0:#2f7fc1; --trip-1:#3aa39b; --trip-2:#639f45; --trip-3:#d8913a; --trip-4:#8e62b5;
  --p-0:#0f7f8c; --p-1:#d4588a; --p-2:#e0852e; --p-3:#6a5acd; --p-4:#3f9b5c; --p-5:#b8962c; --p-6:#4d7fd6; --p-7:#c2543f;
  --paper:#fbfbfa; --paper-edge:rgba(16,18,22,.06);
  --radius:14px; --spring:cubic-bezier(.2,1.1,.3,1); --ease:cubic-bezier(.2,.7,.2,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0a0b0e; --surface:#141619; --surface2:#1c1f24; --surface3:#272b32;
  --fg:#f3f4f6; --fg2:#a3a9b5; --fg3:#6f7684;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.18);
  --accent:#3fbccb; --accent-soft:rgba(63,188,203,.16); --on-accent:#06252a;
  --glass:rgba(20,22,25,.72); --glass-strong:rgba(20,22,25,.9);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.55);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.4);
  --danger:#ff6b74; --danger-soft:rgba(255,107,116,.16); --ok:#4fc786; --ok-soft:rgba(79,199,134,.16); --warn:#e8a93c; --warn-soft:rgba(232,169,60,.16);
  --tile:#1f2328; --scrim:rgba(0,0,0,.7);
  --map-paper:#0b1118; --map-land:#1d2730; --map-ink:#dfe6ee; --map-grain:.12; --map-halo:#0f161d; --map-sea:#0b1118;
  --trip-0:#4f9fe0; --trip-1:#4fc1b8; --trip-2:#86c468; --trip-3:#e6a24e; --trip-4:#ad86d6;
  --p-0:#3fbccb; --p-1:#ef7fa9; --p-2:#f0a05a; --p-3:#9a8cf0; --p-4:#6cc98a; --p-5:#d9b64c; --p-6:#7ea6ef; --p-7:#e67e6c;
  --paper:#15171a; --paper-edge:rgba(255,255,255,.06);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0a0b0e; --surface:#141619; --surface2:#1c1f24; --surface3:#272b32;
  --fg:#f3f4f6; --fg2:#a3a9b5; --fg3:#6f7684;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.18);
  --accent:#3fbccb; --accent-soft:rgba(63,188,203,.16); --on-accent:#06252a;
  --glass:rgba(20,22,25,.72); --glass-strong:rgba(20,22,25,.9);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.55);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.4);
  --danger:#ff6b74; --danger-soft:rgba(255,107,116,.16); --ok:#4fc786; --ok-soft:rgba(79,199,134,.16); --warn:#e8a93c; --warn-soft:rgba(232,169,60,.16);
  --tile:#1f2328; --scrim:rgba(0,0,0,.7);
  --map-paper:#0b1118; --map-land:#1d2730; --map-ink:#dfe6ee; --map-grain:.12; --map-halo:#0f161d; --map-sea:#0b1118;
  --trip-0:#4f9fe0; --trip-1:#4fc1b8; --trip-2:#86c468; --trip-3:#e6a24e; --trip-4:#ad86d6;
  --p-0:#3fbccb; --p-1:#ef7fa9; --p-2:#f0a05a; --p-3:#9a8cf0; --p-4:#6cc98a; --p-5:#d9b64c; --p-6:#7ea6ef; --p-7:#e67e6c;
  --paper:#15171a; --paper-edge:rgba(255,255,255,.06);
  color-scheme:dark;
}