/* porch's themes: every page that wears one reads these tokens. The app,
   money, the shop and porch's rail on every other page. An element with its
   own data-theme (a preview, or the rail on a page that isn't themed) gets
   that theme's whole set. City themes follow the time of day: sky.js sets
   data-time on <html>, and on anything marked data-sky-city. */
/* porch — every rule reads these tokens. Each theme defines the full set,
   so a theme preview (an element with its own data-theme) renders correctly
   inside any other theme. --light/--light2 are the porch light and never change. */
:root,[data-theme="paper"]{
  --hair:#e4e2dd;--side:#eeebe5;--side-grad:var(--side);--list:#f8f7f4;--pane:#fff;--status:#f1efea;
  --ink:#1d1d1f;--ink2:#6e6e73;--ink3:#a1a1a6;--ink4:#8e8e93;
  --on:rgba(0,0,0,.075);--sel:#e5ebf5;--field:rgba(0,0,0,.05);--seg:rgba(0,0,0,.055);--seg-on:#fff;
  --soft:#f7f6f3;--pin:#f6f3ec;--rail:#ebe8e2;--dot:#d6d2ca;
  --in:#e9e9eb;--in-ink:#000;--out:#0a84ff;--out-ink:#fff;
  --blue:#0a84ff;--on-accent:#fff;--amber:#b0560c;--ok:#2f9a4a;--card:rgba(255,255,255,.6);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:var(--blue);--s-amber:var(--amber);
  --post-bg:var(--ink);--post-ink:#fff;--font-display:var(--brand-font);--scroll:rgba(0,0,0,.18);--shadow:0 30px 80px rgba(18,28,48,.25);
  color-scheme:light;
}
[data-theme="onedark"]{
  --hair:#181a1f;--side:#21252b;--side-grad:var(--side);--list:#252930;--pane:#282c34;--status:#21252b;
  --ink:#d7dae0;--ink2:#9da5b4;--ink3:#6b717d;--ink4:#7f848e;
  --on:rgba(255,255,255,.07);--sel:#2c3a52;--field:rgba(255,255,255,.06);--seg:rgba(255,255,255,.06);--seg-on:#3a404b;
  --soft:#2f343f;--pin:#2f343f;--rail:#3a3f4b;--dot:#4b5263;
  --in:#3a3f4b;--in-ink:#e6e6e6;--out:#3d8ef0;--out-ink:#fff;
  --blue:#61afef;--on-accent:#1e2127;--amber:#ffa24d;--ok:#98c379;--card:rgba(255,255,255,.04);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:var(--blue);--s-amber:var(--amber);
  --post-bg:var(--ink);--post-ink:var(--pane);--font-display:var(--brand-font);--scroll:rgba(255,255,255,.16);--shadow:0 30px 80px rgba(0,0,0,.5);
  color-scheme:dark;
}
/* San Francisco: fog over the bay, International Orange from the bridge, set in SF Pro. */
[data-theme="sanfrancisco"]{
  --hair:#d5dade;--side:#e8ecef;--side-grad:linear-gradient(180deg,#e2e7eb 0%,#ebeef1 55%,#f2ebe7 100%);--list:#f3f5f6;--pane:#fcfdfd;--status:#e8ecef;
  --ink:#18202a;--ink2:#566271;--ink3:#9aa4ae;--ink4:#78838f;
  --on:rgba(24,32,42,.08);--sel:#f8e1db;--field:rgba(24,32,42,.05);--seg:rgba(24,32,42,.06);--seg-on:#fff;
  --soft:#eef1f3;--pin:#f6ede9;--rail:#dde2e6;--dot:#c4cbd2;
  --in:#e4e9ed;--in-ink:#18202a;--out:#c0362c;--out-ink:#fff;
  --blue:#c0362c;--on-accent:#fff;--amber:#b0560c;--ok:#2f8f5b;--card:rgba(255,255,255,.7);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:var(--blue);--s-amber:var(--amber);
  --post-bg:#c0362c;--post-ink:#fff;--font-display:var(--brand-font);--scroll:rgba(24,32,42,.18);--shadow:0 30px 80px rgba(24,32,42,.25);
  color-scheme:light;
}
/* Santa Monica: sunset over the pier on the sidebar, sand and Pacific teal everywhere else. */
[data-theme="santamonica"]{
  --hair:#ead8c4;--side:#fbe0cf;--side-grad:linear-gradient(185deg,#ffd6be 0%,#fbc6bd 36%,#f7d9c8 70%,#f3e6d6 100%);--list:#fdf6ee;--pane:#fffaf4;--status:#f6e7d7;
  --ink:#2a211c;--ink2:#76625a;--ink3:#b39e90;--ink4:#987f72;
  --on:rgba(42,33,28,.08);--sel:#d4ede8;--field:rgba(42,33,28,.05);--seg:rgba(42,33,28,.06);--seg-on:#fffaf4;
  --soft:#f8ecdf;--pin:#fbeee1;--rail:#efdccb;--dot:#dcc3ad;
  --in:#f3e5d8;--in-ink:#2a211c;--out:#1d8a84;--out-ink:#fff;
  --blue:#1d8a84;--on-accent:#fff;--amber:#a8520c;--ok:#2f8f5b;--card:rgba(255,255,255,.5);
  --s-ink:#3a2a22;--s-ink2:#7d5d50;--s-ink4:#a07c6c;--s-on:rgba(58,42,34,.09);--s-hover:rgba(58,42,34,.06);--s-card:rgba(255,255,255,.45);--s-link:#1d8a84;--s-amber:#a8520c;
  --post-bg:#1d8a84;--post-ink:#fff;--font-display:var(--brand-font);--scroll:rgba(42,33,28,.2);--shadow:0 30px 80px rgba(90,50,30,.22);
  color-scheme:light;
}
/* Tokyo: Shinjuku after dark. Indigo night, neon pink and cyan, Hiragino for type. */
[data-theme="tokyo"]{
  --hair:#090a16;--side:#11122a;--side-grad:linear-gradient(180deg,#181b40 0%,#11122a 55%,#1b1031 100%);--list:#14152e;--pane:#181a36;--status:#10112a;
  --ink:#eeeaff;--ink2:#a9a7d6;--ink3:#666894;--ink4:#8586b4;
  --on:rgba(255,255,255,.08);--sel:#2c2052;--field:rgba(255,255,255,.06);--seg:rgba(255,255,255,.07);--seg-on:#2f3163;
  --soft:#20224a;--pin:#241d45;--rail:#2d2f58;--dot:#40426f;
  --in:#272a55;--in-ink:#eeeaff;--out:#ff3d7f;--out-ink:#fff;
  --blue:#2de2e6;--on-accent:#0b0c1d;--amber:#ffa24d;--ok:#7ef0b0;--card:rgba(255,255,255,.05);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:#2de2e6;--s-amber:#ffa24d;
  --post-bg:#ff3d7f;--post-ink:#fff;--font-display:"Urbanist","Hiragino Sans","Hiragino Kaku Gothic ProN",-apple-system,sans-serif;--scroll:rgba(255,255,255,.16);--shadow:0 30px 80px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* New York: newsprint pages, a black subway-sign sidebar, taxi yellow, Helvetica. */
[data-theme="newyork"]{
  --hair:#d4d0c7;--side:#141414;--side-grad:#141414;--list:#f3f1ea;--pane:#fbfaf6;--status:#e9e6de;
  --ink:#121212;--ink2:#55524b;--ink3:#9a968c;--ink4:#7b776e;
  --on:rgba(0,0,0,.07);--sel:#fff0ad;--field:rgba(0,0,0,.05);--seg:rgba(0,0,0,.06);--seg-on:#fff;
  --soft:#efece4;--pin:#f6efd6;--rail:#e2ddd2;--dot:#c9c3b7;
  --in:#e9e6de;--in-ink:#121212;--out:#f7c600;--out-ink:#121212;
  --blue:#0039a6;--on-accent:#fff;--amber:#9a4c0a;--ok:#1f7a45;--card:rgba(255,255,255,.07);
  --s-ink:#f3f1ea;--s-ink2:#b8b4aa;--s-ink4:#8d897f;--s-on:rgba(255,255,255,.12);--s-hover:rgba(255,255,255,.07);--s-card:rgba(255,255,255,.07);--s-link:#f7c600;--s-amber:#ffa24d;
  --post-bg:#f7c600;--post-ink:#121212;--font-display:var(--brand-font);--scroll:rgba(0,0,0,.2);--shadow:0 30px 80px rgba(0,0,0,.28);
  color-scheme:light;
}

/* City themes follow the time of day (sky.js sets data-time on <html>):
   San Francisco, Santa Monica and New York go dark after sunset, Tokyo
   comes up light in the daytime. */
[data-theme="sanfrancisco"][data-time="night"]{
  --hair:#0c1016;--side:#141a22;--side-grad:var(--side);--list:#161c24;--pane:#1a212b;--status:#141a22;
  --ink:#e4e9ef;--ink2:#9ba7b4;--ink3:#64707d;--ink4:#7f8b98;
  --on:rgba(255,255,255,.07);--sel:#3a2621;--field:rgba(255,255,255,.06);--seg:rgba(255,255,255,.06);--seg-on:#2b333e;
  --soft:#202731;--pin:#2a2324;--rail:#29303a;--dot:#3b4450;
  --in:#252d38;--in-ink:#e4e9ef;--out:#c9402d;--out-ink:#fff;
  --blue:#ff7a59;--on-accent:#1b0d09;--amber:#ffa24d;--ok:#5fd08a;--card:rgba(255,255,255,.04);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:#ff7a59;--s-amber:#ffa24d;
  --post-bg:#c0362c;--post-ink:#fff;--scroll:rgba(255,255,255,.16);--shadow:0 30px 80px rgba(0,0,0,.55);
  color-scheme:dark;
}
[data-theme="santamonica"][data-time="night"]{
  --hair:#081016;--side:#0f1a22;--side-grad:var(--side);--list:#111d26;--pane:#14212b;--status:#0f1a22;
  --ink:#f3eadf;--ink2:#aaa297;--ink3:#6c7378;--ink4:#8b8a84;
  --on:rgba(255,255,255,.07);--sel:#123b3b;--field:rgba(255,255,255,.06);--seg:rgba(255,255,255,.06);--seg-on:#22323d;
  --soft:#1a2934;--pin:#2a2431;--rail:#21313c;--dot:#36464f;
  --in:#1f2e39;--in-ink:#f3eadf;--out:#1d8a84;--out-ink:#fff;
  --blue:#4fd1c5;--on-accent:#06201e;--amber:#ffa24d;--ok:#6fe0a0;--card:rgba(255,255,255,.04);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:rgba(255,255,255,.08);--s-hover:rgba(255,255,255,.05);--s-card:rgba(255,255,255,.05);--s-link:#4fd1c5;--s-amber:#ffa24d;
  --post-bg:#1d8a84;--post-ink:#fff;--scroll:rgba(255,255,255,.16);--shadow:0 30px 80px rgba(0,0,0,.55);
  color-scheme:dark;
}
[data-theme="tokyo"][data-time="day"]{
  --hair:#dcdee4;--side:#eef0f4;--side-grad:var(--side);--list:#f7f8fa;--pane:#fff;--status:#eef0f4;
  --ink:#16172b;--ink2:#5d6075;--ink3:#9a9cae;--ink4:#7b7e92;
  --on:rgba(22,23,43,.07);--sel:#ffe1ea;--field:rgba(22,23,43,.05);--seg:rgba(22,23,43,.06);--seg-on:#fff;
  --soft:#f0f1f5;--pin:#fdeef2;--rail:#e2e4ea;--dot:#c9ccd6;
  --in:#eceef3;--in-ink:#16172b;--out:#e5326e;--out-ink:#fff;
  --blue:#d42d60;--on-accent:#fff;--amber:#b0560c;--ok:#1f8a5b;--card:rgba(255,255,255,.7);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:#0b8a91;--s-amber:#b0560c;
  --post-bg:#e5326e;--post-ink:#fff;--scroll:rgba(22,23,43,.18);--shadow:0 30px 80px rgba(22,23,43,.22);
  color-scheme:light;
}
[data-theme="newyork"][data-time="night"]{
  --hair:#050505;--side:#0b0b0c;--side-grad:var(--side);--list:#111112;--pane:#151516;--status:#0e0e0f;
  --ink:#f1eee6;--ink2:#a8a49a;--ink3:#6c6962;--ink4:#8a867c;
  --on:rgba(255,255,255,.07);--sel:#3a3210;--field:rgba(255,255,255,.06);--seg:rgba(255,255,255,.07);--seg-on:#2a2a2b;
  --soft:#1d1d1e;--pin:#2a2614;--rail:#262627;--dot:#3a3a3b;
  --in:#232324;--in-ink:#f1eee6;--out:#f7c600;--out-ink:#121212;
  --blue:#f7c600;--on-accent:#121212;--amber:#ffa24d;--ok:#5fd08a;--card:rgba(255,255,255,.04);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:rgba(255,255,255,.1);--s-hover:rgba(255,255,255,.06);--s-card:rgba(255,255,255,.06);--s-link:#f7c600;--s-amber:#ffa24d;
  --post-bg:#f7c600;--post-ink:#121212;--scroll:rgba(255,255,255,.16);--shadow:0 30px 80px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* Tiles: each theme's shape and edge (see app.css). */
:root{--tile-r:16px;--tile-lw:1px;--tile-line:color-mix(in srgb,var(--ink) 9%,transparent);--card-line:color-mix(in srgb,var(--ink) 7%,transparent);--rail-top:34px}
[data-theme="onedark"]{--tile-r:12px;--tile-line:#1b1e23}
[data-theme="sanfrancisco"]{--tile-r:20px;--tile-line:#d5dade}
[data-theme="sanfrancisco"][data-time="night"]{--tile-line:#2a323d}
[data-theme="santamonica"]{--tile-r:26px;--tile-line:transparent;--rail-top:40px}
[data-theme="tokyo"]{--tile-r:8px;--tile-line:#ff3d7f;--rail-top:8px}
[data-theme="tokyo"][data-time="day"]{--tile-line:#dcdee4}
[data-theme="newyork"]{--tile-r:4px;--tile-lw:1.5px;--tile-line:#121212;--rail-top:4px}
[data-theme="newyork"][data-time="night"]{--tile-lw:1px;--tile-line:#333336}