/* ————————————————————————————————————————————————
   Skins. A skin is a palette + a set of motifs (themes.js holds the art).
   data-skin picks the skin; data-theme still picks light or dark inside it.
   Garden is the original look and lives in styles.css, so it needs nothing here.
   To add a skin: one light block, one dark block, one entry in themes.js.
   ———————————————————————————————————————————————— */

/* Art hooks shared by every non-garden hero illustration. */
.hero-art .art-blob { fill: var(--accent-soft); }
.hero-art .art-1 { fill: var(--art-1); }
.hero-art .art-2 { fill: var(--art-2); }
.hero-art .art-3 { fill: var(--art-3); }
.hero-art .art-4 { fill: var(--art-4); }
.hero-art .art-line { stroke: var(--art-2); fill: none; }
.hero-art .art-line-3 { stroke: var(--art-3); fill: none; }
.hero-art .art-muted { stroke: var(--muted-2); fill: none; }

/* ————— Harbor: sea and sky ————— */
[data-skin="harbor"] {
  --bg: #eef4f6; --surface: #fbfdfe; --surface-2: #e6eff2; --surface-3: #d8e5ea;
  --text: #22343d; --muted: #4f6570; --muted-2: #74898f;
  --accent: #2f6f86; --accent-strong: #245a6d; --accent-soft: #dcecf1;
  --accent-btn: #2b6a80; --accent-btn-hover: #22576a; --on-accent: #ffffff;
  --border: #d5e2e7; --border-strong: #bccfd6;
  --sage: #2f7a72; --sage-soft: #dcefec; --lavender: #5a64a8; --lavender-soft: #e6e8f6;
  --rose: #a8574a; --rose-soft: #f6e5e0; --gold: #85652a; --gold-soft: #f3ebd8;
  --sage-num: #24625b; --lavender-num: #4a5390; --rose-num: #8e4a3f; --gold-num: #6e5322;
  --art-1: #2f6f86; --art-2: #6fa7ba; --art-3: #e8b06a; --art-4: #f3d9a4;
  --shadow: 0 1px 2px rgba(30, 60, 75, .05), 0 22px 44px -24px rgba(30, 60, 75, .22);
  --shadow-lift: 0 2px 4px rgba(30, 60, 75, .06), 0 28px 52px -24px rgba(30, 60, 75, .26);
  --sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 72'%3E%3Cpath d='M4 30 C12 24 20 24 24 30 C28 36 36 36 44 30' stroke='%236fa7ba' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M4 42 C12 36 20 36 24 42 C28 48 36 48 44 42' stroke='%236fa7ba' stroke-width='3' fill='none' stroke-linecap='round' opacity='.7'/%3E%3Ccircle cx='34' cy='14' r='6' fill='%23e8b06a' opacity='.8'/%3E%3C/svg%3E");
}
[data-skin="harbor"][data-theme="dark"] {
  --bg: #13232b; --surface: #1a2d36; --surface-2: #213640; --surface-3: #2a414c;
  --text: #e6f0f3; --muted: #a3b9c2; --muted-2: #74909b;
  --accent: #8cc7da; --accent-strong: #b2dcea; --accent-soft: #24414c;
  --accent-btn: #8cc7da; --accent-btn-hover: #b2dcea; --on-accent: #10252d;
  --border: #2a3f49; --border-strong: #36505b;
  --sage: #8fd0c6; --sage-soft: #22403d; --lavender: #b7bdf0; --lavender-soft: #2f3350;
  --rose: #eaa395; --rose-soft: #43302c; --gold: #dcbc78; --gold-soft: #3d3524;
  --sage-num: #8fd0c6; --lavender-num: #b7bdf0; --rose-num: #eaa395; --gold-num: #dcbc78;
  --art-1: #5d9db3; --art-2: #8cc7da; --art-3: #e8b06a; --art-4: #c9a96e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 48px -24px rgba(0, 0, 0, .5);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .34), 0 30px 54px -24px rgba(0, 0, 0, .55);
}

/* ————— Stargazer: dawn sky by day, night sky by night ————— */
[data-skin="stargazer"] {
  --bg: #f2f1f8; --surface: #fdfcff; --surface-2: #ebe9f5; --surface-3: #dedbee;
  --text: #2a2843; --muted: #5b587a; --muted-2: #827fa2;
  --accent: #4f4a9a; --accent-strong: #3f3a82; --accent-soft: #e6e4f6;
  --accent-btn: #4b4694; --accent-btn-hover: #3c3878; --on-accent: #ffffff;
  --border: #e0ddf0; --border-strong: #c9c5e2;
  --sage: #3f7f78; --sage-soft: #ddeeec; --lavender: #6a55a8; --lavender-soft: #ece6f8;
  --rose: #a8526e; --rose-soft: #f6e3ea; --gold: #8a6a1e; --gold-soft: #f5edd6;
  --sage-num: #33665f; --lavender-num: #574590; --rose-num: #8d445c; --gold-num: #725717;
  --art-1: #4f4a9a; --art-2: #8d88cf; --art-3: #e0b54c; --art-4: #f2e3b0;
  --shadow: 0 1px 2px rgba(40, 36, 80, .05), 0 22px 44px -24px rgba(40, 36, 80, .22);
  --shadow-lift: 0 2px 4px rgba(40, 36, 80, .06), 0 28px 52px -24px rgba(40, 36, 80, .26);
  --sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 72'%3E%3Cpath d='M24 14 L27.5 25 L39 25 L29.8 31.8 L33.3 43 L24 36.2 L14.7 43 L18.2 31.8 L9 25 L20.5 25 Z' fill='%23e0b54c'/%3E%3Ccircle cx='38' cy='54' r='2.5' fill='%238d88cf'/%3E%3Ccircle cx='10' cy='58' r='1.8' fill='%238d88cf'/%3E%3C/svg%3E");
}
[data-skin="stargazer"][data-theme="dark"] {
  --bg: #0f1226; --surface: #171b35; --surface-2: #1e2342; --surface-3: #282e52;
  --text: #ecebfa; --muted: #aeb0d4; --muted-2: #7b7fa8;
  --accent: #c3bcff; --accent-strong: #ddd8ff; --accent-soft: #2c2e57;
  --accent-btn: #c3bcff; --accent-btn-hover: #ddd8ff; --on-accent: #171a3a;
  --border: #262b4c; --border-strong: #343a62;
  --sage: #9ad7cd; --sage-soft: #1f3a3e; --lavender: #c9b8f5; --lavender-soft: #33295a;
  --rose: #f0a6bd; --rose-soft: #4a2a3a; --gold: #f0cf7a; --gold-soft: #3e3622;
  --sage-num: #9ad7cd; --lavender-num: #c9b8f5; --rose-num: #f0a6bd; --gold-num: #f0cf7a;
  --art-1: #3a3f78; --art-2: #8d88cf; --art-3: #f0cf7a; --art-4: #fff3c4;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 24px 48px -24px rgba(0, 0, 0, .6);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 54px -24px rgba(0, 0, 0, .65);
}

/* ————— Reading Room: paper, ink and old bindings ————— */
[data-skin="reading"] {
  --bg: #f4efe6; --surface: #fffcf5; --surface-2: #efe7d8; --surface-3: #e4d8c3;
  --text: #33291f; --muted: #66574a; --muted-2: #9d8f80;
  --accent: #7a2e2e; --accent-strong: #632424; --accent-soft: #f2e2dc;
  --accent-btn: #7a2e2e; --accent-btn-hover: #632424; --on-accent: #ffffff;
  --border: #e5dac8; --border-strong: #d2c3aa;
  --sage: #3f6b4f; --sage-soft: #e1ece2; --lavender: #4b4f86; --lavender-soft: #e5e6f3;
  --rose: #8a3b33; --rose-soft: #f4e2dc; --gold: #7e6020; --gold-soft: #f3e9d0;
  --sage-num: #34583f; --lavender-num: #3f4272; --rose-num: #75322b; --gold-num: #6a511b;
  --art-1: #7a2e2e; --art-2: #3f5a7a; --art-3: #b08a3e; --art-4: #efe4cf;
  --radius: 16px; --radius-sm: 10px;
  --font-body: "Charter", "Bitstream Charter", "Iowan Old Style", Georgia, serif;
  --shadow: 0 1px 2px rgba(70, 50, 30, .06), 0 20px 40px -24px rgba(70, 50, 30, .24);
  --shadow-lift: 0 2px 4px rgba(70, 50, 30, .07), 0 26px 50px -24px rgba(70, 50, 30, .28);
  --sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 72'%3E%3Cpath d='M24 26 C18 22 10 21 4 22 L4 50 C10 49 18 50 24 54 C30 50 38 49 44 50 L44 22 C38 21 30 22 24 26 Z' fill='none' stroke='%23b08a3e' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M24 26 L24 54' stroke='%23b08a3e' stroke-width='2.2'/%3E%3C/svg%3E");
}
[data-skin="reading"][data-theme="dark"] {
  --bg: #1f1a16; --surface: #29231e; --surface-2: #322b25; --surface-3: #3d352e;
  --text: #f1e9dc; --muted: #c0b1a0; --muted-2: #8c7f71;
  --accent: #e3a49a; --accent-strong: #f0c3bb; --accent-soft: #47302c;
  --accent-btn: #e3a49a; --accent-btn-hover: #f0c3bb; --on-accent: #2a1a17;
  --border: #3b332c; --border-strong: #4a4037;
  --sage: #a9cdb3; --sage-soft: #2f3d33; --lavender: #b9bce8; --lavender-soft: #33344a;
  --rose: #e6a197; --rose-soft: #47302c; --gold: #dcbd7a; --gold-soft: #3f3725;
  --sage-num: #a9cdb3; --lavender-num: #b9bce8; --rose-num: #e6a197; --gold-num: #dcbd7a;
  --art-1: #a5504a; --art-2: #6c87a8; --art-3: #dcbd7a; --art-4: #e9dcc2;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 48px -24px rgba(0, 0, 0, .5);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .34), 0 30px 54px -24px rgba(0, 0, 0, .55);
}

/* ————— Corner Café: warm cups and slow mornings ————— */
[data-skin="cafe"] {
  --bg: #f5eee6; --surface: #fffaf4; --surface-2: #f0e5d8; --surface-3: #e5d5c2;
  --text: #3a2a20; --muted: #6d5646; --muted-2: #a38d7c;
  --accent: #8a5a3b; --accent-strong: #714830; --accent-soft: #f1e3d6;
  --accent-btn: #7f5236; --accent-btn-hover: #6a442c; --on-accent: #ffffff;
  --border: #e8dacb; --border-strong: #d6c2ad;
  --sage: #56724a; --sage-soft: #e5edde; --lavender: #6c5a8e; --lavender-soft: #ebe5f3;
  --rose: #a5524a; --rose-soft: #f5e3df; --gold: #87631d; --gold-soft: #f4ead2;
  --sage-num: #475f3d; --lavender-num: #5a4a78; --rose-num: #8a443d; --gold-num: #6f5218;
  --art-1: #c98f6a; --art-2: #6b4430; --art-3: #e7c9a6; --art-4: #efe0cf;
  --shadow: 0 1px 2px rgba(80, 50, 30, .06), 0 22px 44px -24px rgba(80, 50, 30, .24);
  --shadow-lift: 0 2px 4px rgba(80, 50, 30, .07), 0 28px 52px -24px rgba(80, 50, 30, .28);
  --sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 72'%3E%3Cpath d='M10 30 L34 30 L32 52 Q31 58 25 58 L19 58 Q13 58 12 52 Z' fill='%23c98f6a'/%3E%3Cpath d='M34 34 Q42 34 41 41 Q40 47 33 47' fill='none' stroke='%23c98f6a' stroke-width='3'/%3E%3Cpath d='M18 24 Q15 19 18 14 M26 24 Q23 19 26 14' fill='none' stroke='%23a38d7c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-skin="cafe"][data-theme="dark"] {
  --bg: #211915; --surface: #2b211c; --surface-2: #342822; --surface-3: #40332b;
  --text: #f3e8de; --muted: #c4ae9c; --muted-2: #8f7a6a;
  --accent: #e2b48f; --accent-strong: #f0cdb0; --accent-soft: #48352a;
  --accent-btn: #e2b48f; --accent-btn-hover: #f0cdb0; --on-accent: #2b1d14;
  --border: #3d3029; --border-strong: #4d3e35;
  --sage: #b3cfa5; --sage-soft: #33402c; --lavender: #c7b9e6; --lavender-soft: #3a3249;
  --rose: #e7a69a; --rose-soft: #4a302b; --gold: #e0c07c; --gold-soft: #403524;
  --sage-num: #b3cfa5; --lavender-num: #c7b9e6; --rose-num: #e7a69a; --gold-num: #e0c07c;
  --art-1: #b9805c; --art-2: #3a2418; --art-3: #e2b48f; --art-4: #5a463a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 48px -24px rgba(0, 0, 0, .5);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .34), 0 30px 54px -24px rgba(0, 0, 0, .55);
}

/* ————— Focus: plain, high contrast, nothing decorative ————— */
[data-skin="focus"] {
  --bg: #f7f7f8; --surface: #ffffff; --surface-2: #f0f1f3; --surface-3: #e4e6ea;
  --text: #1d2127; --muted: #4f5763; --muted-2: #8a919c;
  --accent: #1f5fbf; --accent-strong: #184c99; --accent-soft: #e3ecfa;
  --accent-btn: #1f5fbf; --accent-btn-hover: #184c99; --on-accent: #ffffff;
  --border: #e2e5e9; --border-strong: #c8cdd4;
  --sage: #2f7a4f; --sage-soft: #e1f1e7; --lavender: #5b4fb0; --lavender-soft: #ebe8f8;
  --rose: #b23d3d; --rose-soft: #f9e3e3; --gold: #85640f; --gold-soft: #f6edd3;
  --sage-num: #25623f; --lavender-num: #4a4092; --rose-num: #962f2f; --gold-num: #6c510b;
  --radius: 12px; --radius-sm: 8px;
  --font-display: var(--font-body);
  --card-hi: transparent;
  --shadow: 0 1px 2px rgba(20, 25, 35, .06);
  --shadow-lift: 0 2px 8px rgba(20, 25, 35, .1);
  --sprig: none;
}
[data-skin="focus"][data-theme="dark"] {
  --bg: #121418; --surface: #1a1d22; --surface-2: #22262c; --surface-3: #2c3138;
  --text: #eceff3; --muted: #aab2bd; --muted-2: #7a828d;
  --accent: #8fb6f5; --accent-strong: #b5cff8; --accent-soft: #22324a;
  --accent-btn: #8fb6f5; --accent-btn-hover: #b5cff8; --on-accent: #0f1a2b;
  --border: #2a2f36; --border-strong: #3a4049;
  --sage: #8fd3a8; --sage-soft: #1f3528; --lavender: #bdb4f2; --lavender-soft: #2d2a4a;
  --rose: #f19c9c; --rose-soft: #432627; --gold: #e5c66f; --gold-soft: #3b3320;
  --sage-num: #8fd3a8; --lavender-num: #bdb4f2; --rose-num: #f19c9c; --gold-num: #e5c66f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lift: 0 2px 8px rgba(0, 0, 0, .5);
}
[data-skin="focus"] body { background: var(--bg); }
[data-skin="focus"] .hero { background: var(--surface); }
[data-skin="focus"] .hero-art,
[data-skin="focus"] .footer-sprig { display: none; }

/* ————— Skin picker ————— */
.skin-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 6px 0 4px; padding: 0; border: 0; }
.skin-picker legend { padding: 0; margin-bottom: 8px; }
.skin-option { position: relative; }
.skin-option input { position: absolute; opacity: 0; pointer-events: none; }
.skin-card {
  display: flex; flex-direction: column; gap: 8px; min-height: 44px; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  cursor: pointer; transition: border-color .15s ease, transform .15s ease;
}
.skin-card:hover { border-color: var(--border-strong); }
.skin-option input:checked + .skin-card { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.skin-option input:focus-visible + .skin-card { outline: 2px solid var(--accent); outline-offset: 3px; }
.skin-swatch { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.skin-swatch span { flex: 1; }
.skin-name { font-size: 14px; font-weight: 650; line-height: 1.2; color: var(--text); }
.skin-blurb { font-size: 12px; line-height: 1.3; color: var(--muted); }