/* Colour palettes and typefaces.
 *
 * Every palette defines its light values plus a matching `-d` dark value, and a
 * single generic block at the bottom remaps the tokens when dark is active. That
 * way adding a palette is one block, not three, and light/dark can never drift
 * out of sync.
 *
 * What palettes deliberately do NOT touch: the eight categorical chart colours
 * (--s1…--s8) and the status colours. Those are a validated set — reordering or
 * retinting them would break colour-vision separation in the breakdown bar. The
 * chrome is yours to restyle; the data colours are load-bearing.
 */

/* ==================================================================== fonts */

/* Rounded is the default face: this is a home, not a bank statement. */
:root,
:root[data-font="rounded"] {
  --sans: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
          Quicksand, Verdana, system-ui, sans-serif;
  --tracking-tight: -0.018em;
  --tracking-body: -0.004em;
}
:root[data-font="system"] {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", system-ui, sans-serif;
  --tracking-tight: -0.026em;
  --tracking-body: -0.01em;
}
:root[data-font="serif"] {
  --sans: ui-serif, "New York", Charter, Georgia, "Times New Roman", serif;
  --tracking-tight: -0.018em;
  --tracking-body: 0;
}
:root[data-font="mono"] {
  --sans: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;
  --tracking-tight: -0.02em;
  --tracking-body: -0.012em;
}
:root[data-font="grotesk"] {
  --sans: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif;
  --tracking-tight: -0.03em;
  --tracking-body: -0.012em;
}
:root[data-font="compact"] {
  /* A real installed macOS/iOS face, referenced directly by name — there's no
     dedicated CSS keyword for it the way -apple-system covers SF Pro. */
  --sans: "SF Compact Text", "SF Compact Display", -apple-system, system-ui, sans-serif;
  --tracking-tight: -0.02em;
  --tracking-body: -0.008em;
}
:root[data-font="avenir"] {
  --sans: "Avenir Next", Avenir, "Century Gothic", system-ui, sans-serif;
  --tracking-tight: -0.012em;
  --tracking-body: -0.004em;
}
:root[data-font="optima"] {
  --sans: Optima, Candara, "Trebuchet MS", system-ui, sans-serif;
  --tracking-tight: -0.008em;
  --tracking-body: 0;
}
:root[data-font="baskerville"] {
  --sans: Baskerville, "Libre Baskerville", "Times New Roman", Georgia, serif;
  --tracking-tight: -0.012em;
  --tracking-body: 0;
}
:root[data-font="futura"] {
  --sans: Futura, "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --tracking-tight: -0.01em;
  --tracking-body: 0.002em;
}

/* ================================================================= palettes */
/*
 * Each block: light value, then the dark counterpart as `--token-d`.
 */

/* Home — the default. Warm cream and terracotta rather than clinical white:
   this app is about a family house, and near-white read as sallow. */
:root,
:root[data-palette="home"] {
  --plane: #fdf3e5;      --plane-d: #1e1712;
  --surface: #fffaf2;    --surface-d: #2b211a;
  --surface-2: #f8e7d1;  --surface-2-d: #392c22;
  --surface-3: #efd8ba;  --surface-3-d: #47372a;
  --ink: #3d2b1f;        --ink-d: #f9efe3;
  --ink-2: #7d5b44;      --ink-2-d: #d6bfa7;
  --ink-3: #a3866c;      --ink-3-d: #a68a72;
  --hair: rgba(61,43,31,.16);       --hair-d: rgba(249,239,227,.18);
  --accent: #d9622f;     --accent-d: #f0955e;
  --accent-hover: #c05122; --accent-hover-d: #f7ab7c;
  --accent-soft: #fce3cf; --accent-soft-d: #43281a;
  --accent-ink: #ad4a1c;  --accent-ink-d: #f5b189;
}

:root[data-palette="graphite"] {
  --plane: #fbfbfd;      --plane-d: #000000;
  --surface: #ffffff;    --surface-d: #1c1c1e;
  --surface-2: #f5f5f7;  --surface-2-d: #2c2c2e;
  --surface-3: #eeeef0;  --surface-3-d: #3a3a3c;
  --ink: #1d1d1f;        --ink-d: #f5f5f7;
  --ink-2: #6e6e73;      --ink-2-d: #a1a1a6;
  --ink-3: #86868b;      --ink-3-d: #86868b;
  --hair: rgba(0,0,0,.08);          --hair-d: rgba(255,255,255,.10);
  --accent: #0071e3;     --accent-d: #2997ff;
  --accent-hover: #0077ed; --accent-hover-d: #4aa8ff;
  --accent-soft: #e8f2fd; --accent-soft-d: #002d55;
  --accent-ink: #0064c8;  --accent-ink-d: #6cb6ff;
}

:root[data-palette="clay"] {
  --plane: #f8f5f0;      --plane-d: #14120f;
  --surface: #fffdfa;    --surface-d: #1f1c19;
  --surface-2: #f1ece4;  --surface-2-d: #2a2622;
  --surface-3: #e7e0d5;  --surface-3-d: #38322c;
  --ink: #1c1917;        --ink-d: #f5f1ec;
  --ink-2: #6b6259;      --ink-2-d: #c4bdb4;
  --ink-3: #918a80;      --ink-3-d: #8f877e;
  --hair: rgba(28,25,23,.09);       --hair-d: rgba(245,241,236,.10);
  --accent: #b4552d;     --accent-d: #e07a4d;
  --accent-hover: #9c4726; --accent-hover-d: #ee8a5c;
  --accent-soft: #fbeee7; --accent-soft-d: #2e211a;
  --accent-ink: #8a3f21;  --accent-ink-d: #f0a37c;
}

:root[data-palette="nord"] {
  --plane: #eff2f7;      --plane-d: #2e3440;
  --surface: #ffffff;    --surface-d: #3b4252;
  --surface-2: #e5e9f0;  --surface-2-d: #434c5e;
  --surface-3: #d8dee9;  --surface-3-d: #4c566a;
  --ink: #2e3440;        --ink-d: #eceff4;
  --ink-2: #5b6478;      --ink-2-d: #d8dee9;
  --ink-3: #7b8496;      --ink-3-d: #a5aec0;
  --hair: rgba(46,52,64,.10);       --hair-d: rgba(236,239,244,.12);
  --accent: #4c7fbf;     --accent-d: #88c0d0;
  --accent-hover: #3f6da6; --accent-hover-d: #9fd0dd;
  --accent-soft: #e3ecf7; --accent-soft-d: #34435180;
  --accent-ink: #3b6394;  --accent-ink-d: #a3d4e2;
}

:root[data-palette="solar"] {
  --plane: #fdf6e3;      --plane-d: #002b36;
  --surface: #fffbf0;    --surface-d: #073642;
  --surface-2: #f3ecd8;  --surface-2-d: #0b4553;
  --surface-3: #e9e1cb;  --surface-3-d: #145867;
  --ink: #073642;        --ink-d: #fdf6e3;
  --ink-2: #586e75;      --ink-2-d: #c3ceca;
  --ink-3: #839496;      --ink-3-d: #93a1a1;
  --hair: rgba(7,54,66,.12);        --hair-d: rgba(253,246,227,.12);
  --accent: #b58900;     --accent-d: #d9a72c;
  --accent-hover: #9c7600; --accent-hover-d: #e8b944;
  --accent-soft: #f7edcf; --accent-soft-d: #3a2f0a;
  --accent-ink: #8a6800;  --accent-ink-d: #e2bd52;
}

:root[data-palette="forest"] {
  --plane: #f2f6f2;      --plane-d: #0e1510;
  --surface: #ffffff;    --surface-d: #18211a;
  --surface-2: #e8efe8;  --surface-2-d: #212c23;
  --surface-3: #dae5db;  --surface-3-d: #2c3a2e;
  --ink: #16211a;        --ink-d: #eef4ef;
  --ink-2: #52655a;      --ink-2-d: #b6c6ba;
  --ink-3: #7b8c81;      --ink-3-d: #869489;
  --hair: rgba(22,33,26,.10);       --hair-d: rgba(238,244,239,.10);
  --accent: #2f7d4f;     --accent-d: #55b47a;
  --accent-hover: #276a43; --accent-hover-d: #6cc48d;
  --accent-soft: #e4f1e8; --accent-soft-d: #123020;
  --accent-ink: #24623d;  --accent-ink-d: #79cf9a;
}

:root[data-palette="plum"] {
  --plane: #f8f5fb;      --plane-d: #14101a;
  --surface: #ffffff;    --surface-d: #1e1826;
  --surface-2: #f0eaf6;  --surface-2-d: #292032;
  --surface-3: #e5dcee;  --surface-3-d: #362b42;
  --ink: #1e1726;        --ink-d: #f2edf8;
  --ink-2: #61566f;      --ink-2-d: #c3b8d1;
  --ink-3: #8a7f97;      --ink-3-d: #93889f;
  --hair: rgba(30,23,38,.10);       --hair-d: rgba(242,237,248,.11);
  --accent: #7c4dbe;     --accent-d: #b18aef;
  --accent-hover: #6a3fa8; --accent-hover-d: #c19eff;
  --accent-soft: #f0e8fa; --accent-soft-d: #2c1d42;
  --accent-ink: #653b9e;  --accent-ink-d: #c4a4f5;
}

:root[data-palette="ocean"] {
  --plane: #eff6f7;      --plane-d: #08161a;
  --surface: #ffffff;    --surface-d: #102227;
  --surface-2: #e2eef0;  --surface-2-d: #172d33;
  --surface-3: #d2e3e6;  --surface-3-d: #1f3b42;
  --ink: #0d2429;        --ink-d: #e9f4f6;
  --ink-2: #4d6a70;      --ink-2-d: #b0c8cd;
  --ink-3: #799499;      --ink-3-d: #85a0a6;
  --hair: rgba(13,36,41,.10);       --hair-d: rgba(233,244,246,.10);
  --accent: #12787f;     --accent-d: #45b8c0;
  --accent-hover: #0e666c; --accent-hover-d: #5fc9d0;
  --accent-soft: #ddf0f1; --accent-soft-d: #0b3438;
  --accent-ink: #0d5f65;  --accent-ink-d: #6ed0d7;
}

:root[data-palette="mono"] {
  --plane: #f6f6f6;      --plane-d: #0a0a0a;
  --surface: #ffffff;    --surface-d: #171717;
  --surface-2: #eeeeee;  --surface-2-d: #212121;
  --surface-3: #e2e2e2;  --surface-3-d: #2e2e2e;
  --ink: #111111;        --ink-d: #f2f2f2;
  --ink-2: #5c5c5c;      --ink-2-d: #a8a8a8;
  --ink-3: #8a8a8a;      --ink-3-d: #8a8a8a;
  --hair: rgba(0,0,0,.10);          --hair-d: rgba(255,255,255,.12);
  --accent: #111111;     --accent-d: #f2f2f2;
  --accent-hover: #333333; --accent-hover-d: #d6d6d6;
  --accent-soft: #e6e6e6; --accent-soft-d: #262626;
  --accent-ink: #111111;  --accent-ink-d: #e8e8e8;
}

:root[data-palette="rose"] {
  --plane: #fdf5f4;      --plane-d: #1a1211;
  --surface: #ffffff;    --surface-d: #251a19;
  --surface-2: #f7e9e8;  --surface-2-d: #312221;
  --surface-3: #eed9d8;  --surface-3-d: #402d2b;
  --ink: #241a19;        --ink-d: #f8ecec;
  --ink-2: #6b524f;      --ink-2-d: #c9b3b1;
  --ink-3: #987874;      --ink-3-d: #8f7774;
  --hair: rgba(36,26,25,.09);       --hair-d: rgba(248,236,236,.10);
  --accent: #c05a5a;     --accent-d: #e08585;
  --accent-hover: #a84949; --accent-hover-d: #ec9898;
  --accent-soft: #f9e6e5; --accent-soft-d: #3a2320;
  --accent-ink: #9c4747;  --accent-ink-d: #f0a8a8;
}

:root[data-palette="amber"] {
  --plane: #fdf8ef;      --plane-d: #1c1610;
  --surface: #fffefa;    --surface-d: #271f17;
  --surface-2: #f5ecd9;  --surface-2-d: #332920;
  --surface-3: #ecdfc4;  --surface-3-d: #423528;
  --ink: #2a2015;        --ink-d: #faf3e6;
  --ink-2: #6e5c42;      --ink-2-d: #cdbea3;
  --ink-3: #96866a;      --ink-3-d: #91816a;
  --hair: rgba(42,32,21,.10);       --hair-d: rgba(250,243,230,.10);
  --accent: #c8791f;     --accent-d: #e39a44;
  --accent-hover: #ac6714; --accent-hover-d: #f0ac5e;
  --accent-soft: #f7e8d0; --accent-soft-d: #3d2c15;
  --accent-ink: #9c5f16;  --accent-ink-d: #f0b876;
}

:root[data-palette="mint"] {
  --plane: #f1f9f6;      --plane-d: #0e1815;
  --surface: #ffffff;    --surface-d: #17221e;
  --surface-2: #e2f2ec;  --surface-2-d: #202d28;
  --surface-3: #cfe8de;  --surface-3-d: #2a3a34;
  --ink: #122421;        --ink-d: #ecf7f3;
  --ink-2: #4d6c63;      --ink-2-d: #b1cbc2;
  --ink-3: #7b968c;      --ink-3-d: #85a49a;
  --hair: rgba(18,36,33,.10);       --hair-d: rgba(236,247,243,.10);
  --accent: #159879;     --accent-d: #3ec39f;
  --accent-hover: #0f8367; --accent-hover-d: #57d4b1;
  --accent-soft: #dff4ee; --accent-soft-d: #113a2f;
  --accent-ink: #0e7a60;  --accent-ink-d: #7bdfc0;
}

:root[data-palette="slate"] {
  --plane: #f4f6f8;      --plane-d: #11161c;
  --surface: #ffffff;    --surface-d: #1b222b;
  --surface-2: #e6ebf0;  --surface-2-d: #262e38;
  --surface-3: #d6dee6;  --surface-3-d: #323c47;
  --ink: #1b2733;        --ink-d: #eef2f6;
  --ink-2: #526375;      --ink-2-d: #b6c3d0;
  --ink-3: #7c8b9c;      --ink-3-d: #8493a3;
  --hair: rgba(27,39,51,.09);       --hair-d: rgba(238,242,246,.10);
  --accent: #3b6ea5;     --accent-d: #6d9ed4;
  --accent-hover: #2f5c8c; --accent-hover-d: #83aee0;
  --accent-soft: #e5eef7; --accent-soft-d: #1c3450;
  --accent-ink: #2c567f;  --accent-ink-d: #9cc2ea;
}

/* "custom" has no block of its own — it starts from the default values above
   (the bare :root rule) and JS immediately overlays whichever colours the
   couple picked as inline styles on :root, which win over any stylesheet rule. */

/* ======================================================== illustration ink */
/*
 * The spot art keeps its own colours whatever palette is active — a house
 * with a purple roof because you picked Plum would be daft. These only flip
 * for dark mode, where the outline has to invert to stay visible.
 */
:root {
  --art-line: #3d2b1f;      --art-line-d: #f4ead9;
  --art-wall: #fff6e9;      --art-wall-d: #4a3a2c;
  --art-roof: #d9542f;      --art-roof-d: #b8482a;
  --art-door: #8a5533;      --art-door-d: #a06a42;
  --art-window: #a8d8ea;    --art-window-d: #4f7f95;
  --art-leaf: #5aa860;      --art-leaf-d: #4a8b52;
  --art-trunk: #8a5a3c;     --art-trunk-d: #7a4e34;
  --art-sun: #f5c542;       --art-sun-d: #d9ab34;
  --art-cloud: #ffffff;     --art-cloud-d: #55483c;
  --art-ground: #8ec36f;    --art-ground-d: #4f7345;
  --art-body: #4a90c2;      --art-body-d: #3d7aa6;
  --art-tyre: #46403c;      --art-tyre-d: #2c2622;
  --art-metal: #cfd6db;     --art-metal-d: #8b959c;
  --art-glass: #d9ecf5;     --art-glass-d: #46626f;
  --art-lamp: #e8705e;      --art-lamp-d: #c25a4a;
}

/* ============================================================ dark mapping */
/*
 * One block, whatever the palette. Follows the OS unless the app's own toggle
 * has stamped data-theme, which wins in both directions.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane: var(--plane-d);
    --surface: var(--surface-d);
    --surface-2: var(--surface-2-d);
    --surface-3: var(--surface-3-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --ink-3: var(--ink-3-d);
    --hair: var(--hair-d);
    --accent: var(--accent-d);
    --accent-hover: var(--accent-hover-d);
    --accent-soft: var(--accent-soft-d);
    --accent-ink: var(--accent-ink-d);

    /* Chart hues re-stepped for a dark surface — same eight, not a new set. */
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --neutral-fill: #48484a;
    --good: #30d158; --good-soft: #10301a;
    --warn: #ffd426; --warn-soft: #332a00;
    --danger: #ff453a; --danger-soft: #3a1210;

    /* Illustration ink flips too — a dark outline vanishes on a dark page. */
    --art-line: var(--art-line-d);
    --art-wall: var(--art-wall-d);
    --art-roof: var(--art-roof-d);
    --art-door: var(--art-door-d);
    --art-window: var(--art-window-d);
    --art-leaf: var(--art-leaf-d);
    --art-trunk: var(--art-trunk-d);
    --art-sun: var(--art-sun-d);
    --art-cloud: var(--art-cloud-d);
    --art-ground: var(--art-ground-d);
    --art-body: var(--art-body-d);
    --art-tyre: var(--art-tyre-d);
    --art-metal: var(--art-metal-d);
    --art-glass: var(--art-glass-d);
    --art-lamp: var(--art-lamp-d);
    --shadow-xs: none; --shadow-sm: none;
    --shadow: 0 4px 24px rgba(0,0,0,.5);
    --shadow-lg: 0 24px 64px -12px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: var(--plane-d);
  --surface: var(--surface-d);
  --surface-2: var(--surface-2-d);
  --surface-3: var(--surface-3-d);
  --ink: var(--ink-d);
  --ink-2: var(--ink-2-d);
  --ink-3: var(--ink-3-d);
  --hair: var(--hair-d);
  --accent: var(--accent-d);
  --accent-hover: var(--accent-hover-d);
  --accent-soft: var(--accent-soft-d);
  --accent-ink: var(--accent-ink-d);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --neutral-fill: #48484a;
  --good: #30d158; --good-soft: #10301a;
  --warn: #ffd426; --warn-soft: #332a00;
  --danger: #ff453a; --danger-soft: #3a1210;

  /* Illustration ink flips too — a dark outline vanishes on a dark page. */
  --art-line: var(--art-line-d);
  --art-wall: var(--art-wall-d);
  --art-roof: var(--art-roof-d);
  --art-door: var(--art-door-d);
  --art-window: var(--art-window-d);
  --art-leaf: var(--art-leaf-d);
  --art-trunk: var(--art-trunk-d);
  --art-sun: var(--art-sun-d);
  --art-cloud: var(--art-cloud-d);
  --art-ground: var(--art-ground-d);
  --art-body: var(--art-body-d);
  --art-tyre: var(--art-tyre-d);
  --art-metal: var(--art-metal-d);
  --art-glass: var(--art-glass-d);
  --art-lamp: var(--art-lamp-d);
  --shadow-xs: none; --shadow-sm: none;
  --shadow: 0 4px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 64px -12px rgba(0,0,0,.7);
}

:root[data-theme="light"] { color-scheme: light; }

/* =========================================================== theme pickers */

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }

.swatch {
  border-radius: var(--r-sm); padding: 12px; text-align: left;
  background: var(--surface); border: 2px solid var(--outline); box-shadow: 0 3px 0 var(--drop);
  display: grid; gap: 10px; transition: box-shadow .2s var(--ease), transform .12s var(--ease);
}
.swatch:hover { transform: translateY(-3px) rotate(-1deg); }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 3px 0 var(--accent); }
.swatch .chips { display: flex; gap: 4px; height: 26px; border-radius: 6px; overflow: hidden; }
.swatch .chips i { flex: 1; }
.swatch .nm { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.swatch .nm .tick { color: var(--accent); }

.fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.font-opt {
  border-radius: var(--r-sm); padding: 14px 16px; text-align: left;
  background: var(--surface); border: 2px solid var(--outline); box-shadow: 0 3px 0 var(--drop);
  display: grid; gap: 4px; transition: box-shadow .2s var(--ease), transform .12s var(--ease);
}
.font-opt:hover { transform: translateY(-3px) rotate(.8deg); }
.font-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 3px 0 var(--accent); }
.font-opt .sample { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.font-opt .who { font-size: 12px; color: var(--ink-3); letter-spacing: 0; }