/* Harborline Design Framework v2 · shared tokens for every Harborline site.
   Load this file on every site. Then add ONE body class (.familylock / .familybeacon / .familycove;
   none for the hub) which overrides only the accent block. Nothing else may differ. */
:root{
  /* neutrals · day */
  --bg:#FBF3E8; --surface:#FFFDF8; --sunken:#F6EADB; --border:#EADBC6;
  --ink:#2F241C; --ink-2:#6B5444;
  /* 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) */
  --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;
  /* hub skin (default): no accent of its own */
  --accent:#E0C9A6; --accent-soft:#F6EADB; --accent-ink:#6B5444;
  /* launcher / mark gradient */
  --mark-top:#FFF8EE; --mark-bottom:#F8E6D2;
  /* 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: header and hero band are the same height on every page of every site */
  --head-h:68px; --hero-h:680px; --scene-h:250px;
  --font:"Nunito", ui-rounded, system-ui, sans-serif;
  --shadow-float:0 12px 32px rgba(43,35,64,.18);
  color-scheme:light;
}
/* the one warm night, for every product · set by the sun/moon toggle, never by the OS */
html[data-theme="dark"]{
  --bg:#221C22; --surface:#2D2628; --sunken:#38302F; --border:#4A403C;
  --ink:#F4ECE2; --ink-2:#CFC0B4;
  --sage:#A9CB86; --sage-soft:#2F3A2C; --sage-ink:#C6E0AA;
  --brick:#FF8F7E; --brick-soft:#4A2A26;
  --scrim:rgba(18,12,16,.85);
  --i-glyph:#CFC0B4; --i-edge:var(--accent-soft);   /* night halo = the product's accent-soft */
  --accent:#D9BE97; --accent-ink:#E6D6C0;            /* hub night */
  --mark-top:#3C3236; --mark-bottom:#221C22;
  --shadow-float:0 12px 32px rgba(0,0,0,.45);
  color-scheme:dark;
}
/* ---- product skins: the ONLY overrides a site may make. The class goes on <body> for an app site,
   or on a card/row on the hub so the hub can show each app in its own skin. ---- */
.familylock{ --accent:#F08A45; --accent-soft:#F6C493; --accent-ink:#9A4316; }
html[data-theme="dark"] .familylock{ --accent:#F5934F; --accent-ink:#FFB27D; }
.familybeacon{ --accent:#E9A93B; --accent-soft:#F8DC9B; --accent-ink:#7F4F0E; }
html[data-theme="dark"] .familybeacon{ --accent:#F2B954; --accent-ink:#FFD58A; }
/* FamilyCove (in development): sea glass */
.familycove{ --accent:#3E9A8E; --accent-soft:#BFE3DA; --accent-ink:#1F5A52; }
html[data-theme="dark"] .familycove{ --accent:#5BB8AA; --accent-ink:#9FE0D4; }

/* ---- 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) ----
   The header and the hero band (sky + scene) have one fixed height per breakpoint, never
   sized by their content, so the horizon sits at exactly the same place on every page of
   every Harborline site and does not jump when moving between them. */
@media (max-width:880px){ :root{ --hero-h:640px; } }
@media (max-width:560px){ :root{ --scene-h:200px; } }
.site-head > .wrap{height:var(--head-h)}
.hero{position:relative;overflow:hidden;height:var(--hero-h);padding:0;box-sizing:border-box}
.hero .scene{height:var(--scene-h)}