/* Harborline Design Framework v3 · shared tokens for every Harborline site.
   Load this file on every site, then put ONE skin class on <body>: .harborline (harborlineapps.com,
   which wears exactly the Harborline Home app's skin), .familylock, .familybeacon, .familycove,
   .familydeck or .familycard.
   A skin switches the whole palette (tinted neutrals + accent, day and night), the same values as
   the app (Harborline-Design/tools/gen_tokens.py). The hub can also put a skin class on a card or
   row to show an app in its own skin. Nothing else may differ between sites. */
:root{
  /* neutrals · day (Harborline skin by default) */
  --bg:#EEEFEE; --surface:#FBFCFD; --sunken:#DFE1E0; --border:#CBCCCA;
  --ink:#272627; --ink-2:#585758;
  /* the pen (both themes) */
  --pen:#2B2340; --on-accent:#2B1A10;
  /* semantic */
  --sage:#5E7F43; --sage-soft:#E3EDD8; --sage-ink:#3E5F37;
  --brick:#A8321E; --brick-soft:#F6D5CF;
  --scrim:rgba(43,35,64,.78);
  /* icon sticker palette (both themes); icon fills never follow the accent */
  --i-ink:#2B2340; --i-edge:transparent; --i-glyph:#5E4F78; --i-paper:#FFF8EC; --i-shine:#FFF8EC;
  --i-peach:#F6C493; --i-peach-soft:#FCE3CF; --i-butter:#F5C76B; --i-sage:#9DBF7A; --i-orange:#F08A45; --i-honey:#F8DC9B; --i-lantern:#E9A93B;
  /* accent (Harborline: Harbour Blue) */
  --accent:#2F5D8A; --accent-soft:#CFE0F0; --accent-ink:#24507A;
  /* construction constants */
  --r-card:20px; --r-control:14px; --r-banner:16px; --r-dialog:24px; --r-chip:999px;
  --h-control:52px; --h-touch:44px; --badge-icon:40px; --badge-dialog:64px; --badge-hero:72px;
  --gutter:20px; --stroke:1.5px; --dialog-w:320px;
  /* page frame: the header is the same height on every page of every site */
  --head-h:68px;
  --font:"Nunito", ui-rounded, system-ui, sans-serif;
  --shadow-float:0 12px 32px rgba(43,35,64,.18);
  color-scheme:light;
}
/* night · set by the sun/moon toggle, never by the OS */
html[data-theme="dark"]{
  --bg:#1B1E22; --surface:#25292F; --sunken:#30343B; --border:#40464F;
  --ink:#ECEDEF; --ink-2:#C0C4C8;
  --sage:#A9CB86; --sage-soft:#2C352A; --sage-ink:#C6E0AA;
  --brick:#FF8F7E; --brick-soft:#43282A;
  --scrim:rgba(14,12,16,.85);
  --i-glyph:#C0C4C8; --i-edge:var(--accent-soft);   /* night halo = the skin's accent-soft */
  --accent:#5F8DBB; --accent-ink:#9CC2E6;
  --shadow-float:0 12px 32px rgba(0,0,0,.45);
  color-scheme:dark;
}
/* ---- skins: the ONLY overrides a site may make (whole palette, day and night) ---- */
.harborline{ --bg:#EEEFEE; --surface:#FBFCFD; --sunken:#DFE1E0; --border:#CBCCCA; --ink:#272627; --ink-2:#585758;
  --accent:#2F5D8A; --accent-soft:#CFE0F0; --accent-ink:#24507A; }
html[data-theme="dark"] .harborline{ --bg:#1B1E22; --surface:#25292F; --sunken:#30343B; --border:#40464F; --ink:#ECEDEF; --ink-2:#C0C4C8; --i-glyph:#C0C4C8;
  --accent:#5F8DBB; --accent-ink:#9CC2E6; }
.familylock{ --bg:#F5F1F4; --surface:#FDFCFE; --sunken:#EAE5E8; --border:#DAD1D5; --ink:#30292D; --ink-2:#685C63;
  --accent:#9D7FD8; --accent-soft:#D8CBF2; --accent-ink:#5C3FA3; }
html[data-theme="dark"] .familylock{ --bg:#1E1C21; --surface:#29262E; --sunken:#34313A; --border:#46414E; --ink:#EDECEF; --ink-2:#C3C0C8; --i-glyph:#C3C0C8;
  --accent:#B39AE6; --accent-ink:#C9B5FA; }
.familybeacon{ --bg:#FBF4E9; --surface:#FFFDFB; --sunken:#F2E9D8; --border:#E5D7BF; --ink:#362C20; --ink-2:#72624D;
  --accent:#E9A93B; --accent-soft:#F8DC9B; --accent-ink:#7F4F0E; }
html[data-theme="dark"] .familybeacon{ --bg:#221F1B; --surface:#2F2B25; --sunken:#3B3630; --border:#4F4840; --ink:#EFEDEC; --ink-2:#C8C5C0; --i-glyph:#C8C5C0;
  --accent:#F2B954; --accent-ink:#FFD58A; }
.familycove{ --bg:#EFF3EF; --surface:#FBFDFD; --sunken:#E1E7E1; --border:#CDD4CA; --ink:#282B27; --ink-2:#5A6059;
  --accent:#3E9A8E; --accent-soft:#BFE3DA; --accent-ink:#1F5A52; }
html[data-theme="dark"] .familycove{ --bg:#1C2121; --surface:#262E2D; --sunken:#313A39; --border:#414E4C; --ink:#ECEFEE; --ink-2:#C0C8C7; --i-glyph:#C0C8C7;
  --accent:#5BB8AA; --accent-ink:#9FE0D4; }
.familydeck{ --bg:#EFF3EB; --surface:#FBFDFC; --sunken:#E1E7DC; --border:#CDD4C3; --ink:#282B23; --ink-2:#5B6051;
  --accent:#3F9A5A; --accent-soft:#C6E6CD; --accent-ink:#24653A; }
html[data-theme="dark"] .familydeck{ --bg:#1C211E; --surface:#262E28; --sunken:#313A34; --border:#414E45; --ink:#ECEFED; --ink-2:#C0C8C2; --i-glyph:#C0C8C2;
  --accent:#5DB877; --accent-ink:#A6E2B6; }
/* FamilyCard has no tokens yet (gen_tokens.py has no familycard): these are the splash art's own
   colours, PALS.cardred in Harborline/tools/gradient/art.mjs (border = its line colour). */
.familycard{ --bg:#F8EEEC; --surface:#FEFBFB; --sunken:#EFE1DF; --border:#E2CDCA; --ink:#332626; --ink-2:#6D5856;
  --accent:#D64541; --accent-soft:#F7D0CC; --accent-ink:#9A2C28; }
html[data-theme="dark"] .familycard{ --bg:#221C1C; --surface:#2F2727; --sunken:#3B3232; --border:#4D4242; --ink:#EFECEC; --ink-2:#C7BFBE; --i-glyph:#C7BFBE;
  --accent:#E8706B; --accent-ink:#FFB5AE; }

/* ---- the construction (same on every site) ---- */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.02rem;line-height:1.55}
h1,h2,h3{font-weight:900;line-height:1.12;margin:0;text-wrap:balance}
a{color:var(--accent-ink);font-weight:900;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-control);padding:0 20px;border-radius:var(--r-control);font-weight:900;font-size:1rem;border:0;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent-soft);color:var(--pen)}
.btn-secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 var(--stroke) var(--border)}
.btn-quiet{background:transparent;color:var(--ink-2)}
.btn-danger{background:transparent;color:var(--brick);box-shadow:inset 0 0 0 var(--stroke) var(--brick)}
.btn-icon{width:var(--h-touch);height:var(--h-touch);padding:0;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 var(--stroke) var(--border)}
.card{background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--r-card);padding:16px}
.tile{background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--r-control);padding:12px 14px}
.banner{border-radius:var(--r-banner);padding:12px 14px;background:var(--sunken)}
.banner-warning{background:var(--accent-soft);border:var(--stroke) solid var(--accent);color:var(--ink)}
html[data-theme="dark"] .banner-warning{background:var(--sunken)}
.chip-needed{background:var(--accent-soft);color:var(--accent-ink)}
html[data-theme="dark"] .chip-needed{background:var(--sunken)}
.chip{display:inline-block;border-radius:var(--r-chip);padding:3px 10px 4px;font-weight:900;font-size:.8rem;background:var(--sunken);color:var(--ink)}
.chip-status{background:var(--sage-soft);color:var(--sage)}
.chip-selected{background:var(--accent-soft);color:var(--pen)}
.input{background:var(--bg);border:var(--stroke) solid var(--border);border-radius:var(--r-control);min-height:var(--h-control);padding:0 16px;font-weight:900;font-family:inherit;color:var(--ink)}
.badge{display:grid;place-items:center;border-radius:999px;background:var(--accent-soft)}
.badge-hero{width:var(--badge-hero);height:var(--badge-hero)} .badge-dialog{width:var(--badge-dialog);height:var(--badge-dialog)}
.badge-icon{width:var(--badge-icon);height:var(--badge-icon);border-radius:12px;background:var(--sunken)}
.dialog{background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--r-dialog);width:min(var(--dialog-w),calc(100vw - 2*var(--gutter)));padding:22px 20px 20px;box-shadow:var(--shadow-float);text-align:center}
.scrim{position:fixed;inset:0;background:var(--scrim)}
.section-head{font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
/* theme toggle: track = sunken + border, thumb = surface + border, sits in the header on every site */
.theme-toggle{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--sunken);border:var(--stroke) solid var(--border)}
.theme-toggle button{width:36px;height:36px;border-radius:999px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.theme-toggle button[aria-pressed="true"]{background:var(--surface);box-shadow:inset 0 0 0 var(--stroke) var(--border)}

/* ---- page frame (same on every page of every site) ----
   Hero = the app's picture, full width, with the header on its sky and the words on top of it.
   The hero is as tall as the picture, so the horizon sits at the same place on every page. */
.site-head > .wrap{height:var(--head-h)}
.hero{position:relative;padding:0;box-sizing:border-box}