/* ============================================================
house.css — the household skin, plug and play
------------------------------------------------------------
IMPLEMENTS style/tokens.json v2 (skin B rev 2, the modern
register). Change tokens.json first; keep this in step.
Usage, three lines:
← GENERATED, see brands.mjs
← optional behaviors
Then: class="hh-ground" on , hh-* classes on elements,
data-brand="" on anything a brand should recolor,
html.night for lights-on (or let the media query decide).
THE LINE THIS PACKAGE HOLDS: these are the house's DNA
elements — the chrome at the edges of every surface. A
product's own canvas (Satya's globe, Poppy's cook mode) is
that product's competence; the house never reaches into it,
and a product never redraws the chrome. Buttons stop fighting
for competence inside products because they were never the
product's job.
Namespacing: every var is --hh-*, every class is .hh-*, so
this file drops into any app without collisions. Do not
redefine an --hh-* value locally; if a value is missing,
add it to tokens.json so every surface gets it.
============================================================ */
/* ---------------- tokens ---------------- */
:root{
--hh-sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
--hh-serif:'Fraunces','New York',Georgia,'Times New Roman',serif; /* italic truth lines ONLY */
--hh-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
--hh-ground:#FCFCFC;
--hh-raised:#FFFFFF;
--hh-ink:#101118;
--hh-muted:#5F6270;
--hh-faint:#9A9DA8;
--hh-line:#ECECEF;
--hh-line-strong:#DDDEE4;
--hh-live:#1B9E6C;
--hh-alarm:#E9264E;
--hh-warn:#DB8A2A;
--hh-backdrop:#F1F1F4;
--hh-grid:rgba(16,17,24,.07);
--hh-lamp:224,183,93;
--hh-shadow:var(--hh-shc);
--hh-shadow-bar:0 1px 2px rgba(16,17,24,.03), 0 8px 24px rgba(16,17,24,.05);
/* house default brand — a surface with no data-brand wears these */
--hh-accent:#E8593F;
--hh-accent-soft:#FBF0ED;
--hh-accent-ink:#FFFFFF;
--hh-step--1:clamp(.82rem,.8rem + .1vw,.88rem);
--hh-step-0:clamp(1rem,.97rem + .15vw,1.06rem);
--hh-step-1:clamp(1.25rem,1.17rem + .4vw,1.5rem);
--hh-step-2:clamp(1.8rem,1.5rem + 1.3vw,2.6rem);
--hh-step-3:clamp(2.6rem,2rem + 2.8vw,4.6rem);
/* depth dialects: consumer (warmer) is the default; data-register="dev"
swaps the pointers to the sharper set. Each value defined ONCE. */
--hh-rc-sheet:22px; --hh-rc-field:20px; --hh-rc-card:14px; --hh-rc-tip:10px;
--hh-rd-sheet:14px; --hh-rd-field:12px; --hh-rd-card:10px; --hh-rd-tip:8px;
--hh-shc:0 1px 2px rgba(16,17,24,.04),0 12px 40px rgba(16,17,24,.06);
--hh-shd:0 1px 1px rgba(16,17,24,.06),0 6px 18px rgba(16,17,24,.08);
--hh-r-pill:999px; --hh-r-plate:6px; --hh-r-cell:3px;
--hh-r-sheet:var(--hh-rc-sheet); --hh-r-field:var(--hh-rc-field);
--hh-r-card:var(--hh-rc-card); --hh-r-tip:var(--hh-rc-tip);
}
[data-register="dev"]{
--hh-r-sheet:var(--hh-rd-sheet); --hh-r-field:var(--hh-rd-field);
--hh-r-card:var(--hh-rd-card); --hh-r-tip:var(--hh-rd-tip);
--hh-shadow:var(--hh-shd)}
[data-register="consumer"]{
--hh-r-sheet:var(--hh-rc-sheet); --hh-r-field:var(--hh-rc-field);
--hh-r-card:var(--hh-rc-card); --hh-r-tip:var(--hh-rc-tip);
--hh-shadow:var(--hh-shc)}
html.night{
--hh-ground:#0B0C12;
--hh-raised:#14151D;
--hh-ink:#EEEEF3;
--hh-muted:#9DA0AD;
--hh-faint:#63666F;
--hh-line:#20212B;
--hh-line-strong:#2E3040;
--hh-live:#3DD68C;
--hh-alarm:#FF5C77;
--hh-warn:#F0A455;
--hh-backdrop:#06070B;
--hh-grid:rgba(238,238,243,.055);
--hh-lamp:240,196,102;
--hh-shc:0 1px 2px rgba(0,0,0,.4),0 12px 40px rgba(0,0,0,.45);
--hh-shd:0 1px 1px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.5);
--hh-shadow:var(--hh-shc);
--hh-shadow-bar:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
--hh-accent:#FF6A4D;
--hh-accent-soft:#241713;
}
/* no explicit choice? follow the room's own light */
@media (prefers-color-scheme: dark){
html:not(.day):not(.night){
--hh-ground:#0B0C12; --hh-raised:#14151D; --hh-ink:#EEEEF3;
--hh-muted:#9DA0AD; --hh-faint:#63666F; --hh-line:#20212B;
--hh-line-strong:#2E3040; --hh-live:#3DD68C; --hh-alarm:#FF5C77; --hh-warn:#F0A455;
--hh-backdrop:#06070B; --hh-grid:rgba(238,238,243,.055); --hh-lamp:240,196,102;
--hh-shc:0 1px 2px rgba(0,0,0,.4),0 12px 40px rgba(0,0,0,.45); --hh-shd:0 1px 1px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.5);
--hh-shadow:var(--hh-shc);
--hh-shadow-bar:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
--hh-accent:#FF6A4D; --hh-accent-soft:#241713;
}
}
/* ---------------- ground ---------------- */
.hh-ground{margin:0;background:var(--hh-ground);color:var(--hh-ink);
font-family:var(--hh-sans);font-size:var(--hh-step-0);line-height:1.6;
-webkit-font-smoothing:antialiased;
transition:background 500ms ease,color 500ms ease} /* relight */
/* the construction grid — a whisper under every page */
.hh-ground::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
opacity:.55;
background-image:linear-gradient(var(--hh-grid) 1px,transparent 1px),
linear-gradient(90deg,var(--hh-grid) 1px,transparent 1px);
background-size:26px 26px}
.hh-ground ::selection{background:var(--hh-accent);color:var(--hh-accent-ink)}
/* the glossed bar — content slides under it, never through it */
.hh-header{position:sticky;top:0;z-index:50;
background:var(--hh-ground); /* fallback: solid ground where color-mix is unsupported */
background:color-mix(in srgb,var(--hh-ground) 86%,transparent);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
box-shadow:var(--hh-shadow-bar)}
/* ---------------- type ---------------- */
.hh-kicker{font-family:var(--hh-mono);font-size:12px;color:var(--hh-faint)}
.hh-h1{font-weight:700;font-size:var(--hh-step-3);line-height:1.04;letter-spacing:-.03em;margin:.25em 0}
.hh-h2{font-weight:600;font-size:var(--hh-step-2);letter-spacing:-.02em;margin:0 0 8px}
.hh-lede{color:var(--hh-muted);max-width:58ch;margin:0;font-size:var(--hh-step-1);line-height:1.5}
.hh-body{color:var(--hh-muted);max-width:60ch;margin:0}
.hh-truth{font-family:var(--hh-serif);font-style:italic;color:var(--hh-ink)}
.hh-record{font-family:var(--hh-mono);font-size:var(--hh-step--1);color:var(--hh-muted)}
/* ---------------- surfaces ---------------- */
/* a brand's tinted field — the hero panel a product's demo plays in */
.hh-field{background:var(--hh-accent-soft);border-radius:var(--hh-r-field);
position:relative;overflow:hidden;
transition:transform 240ms cubic-bezier(.16,1,.3,1),box-shadow 240ms ease} /* settle */
.hh-field:hover,.hh-lift:hover .hh-field{transform:translateY(-4px);box-shadow:var(--hh-shadow)}
/* a whole surface as a rounded pane of glass — dialogs, embedded
windows, panes. One object sitting on the ground. */
.hh-sheet{background:var(--hh-raised);border-radius:var(--hh-r-sheet);
box-shadow:var(--hh-shadow);overflow:hidden}
/* the stage: the deeper surface a multi-sheet arrangement sits on.
No grid here — the grid belongs to the sheets. */
.hh-backdrop{background:var(--hh-backdrop);
transition:background 500ms ease}
/* hairline rows — the way lists and tables divide; boxes are retired */
.hh-rows{border-top:1px solid var(--hh-line)}
.hh-rows>*{border-bottom:1px solid var(--hh-line)}
/* ---------------- controls: the DNA at the edges ---------------- */
.hh-btn{font-family:var(--hh-sans);font-weight:500;font-size:.95rem;
border-radius:var(--hh-r-pill);padding:11px 22px;cursor:pointer;
border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;
letter-spacing:-.01em;
transition:transform 120ms ease,border-color 150ms ease,color 150ms ease,
opacity 150ms ease,background 150ms ease}
.hh-btn:active{transform:translateY(1px)}
.hh-btn:focus-visible{outline:2px solid var(--hh-accent);outline-offset:2px}
.hh-btn .hh-arr{transition:transform 160ms cubic-bezier(.16,1,.3,1)} /* lean */
.hh-btn:hover .hh-arr{transform:translateX(3px)}
.hh-btn--primary{background:var(--hh-ink);color:var(--hh-ground)}
.hh-btn--primary:hover{opacity:.85}
.hh-btn--quiet{background:none;border-color:var(--hh-line-strong);color:var(--hh-ink)}
.hh-btn--quiet:hover{border-color:var(--hh-ink)}
.hh-btn--link{background:none;border:0;color:var(--hh-accent);padding:11px 4px}
/* destructive actions ONLY — the alarm stays a signal */
.hh-btn--danger{background:none;color:var(--hh-alarm);
border-color:var(--hh-alarm); /* fallback */
border-color:color-mix(in srgb,var(--hh-alarm) 45%,transparent)}
.hh-btn--danger:hover{background:var(--hh-alarm);color:#fff;border-color:var(--hh-alarm)}
.hh-tgl{position:relative;width:42px;height:24px;border-radius:var(--hh-r-pill);flex:none;
border:1px solid var(--hh-line-strong);background:var(--hh-line);cursor:pointer;
transition:background 200ms ease,border-color 200ms ease}
.hh-tgl::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;
border-radius:50%;background:var(--hh-raised);box-shadow:0 1px 2px rgba(16,17,24,.2);
transition:left 200ms cubic-bezier(.2,.8,.2,1)}
.hh-tgl[aria-pressed="true"]{background:var(--hh-ink);border-color:var(--hh-ink)}
.hh-tgl[aria-pressed="true"]::after{left:calc(100% - 19px)}
.hh-tgl:focus-visible{outline:2px solid var(--hh-accent);outline-offset:3px}
.hh-seg{display:inline-flex;border:1px solid var(--hh-line-strong);
border-radius:var(--hh-r-pill);background:var(--hh-raised);padding:3px;gap:2px}
.hh-seg button{font-family:var(--hh-sans);font-weight:500;font-size:.9rem;padding:7px 16px;
border:0;border-radius:var(--hh-r-pill);background:none;color:var(--hh-muted);
cursor:pointer;transition:background 150ms,color 150ms}
.hh-seg button[aria-pressed="true"]{background:var(--hh-ink);color:var(--hh-ground)}
.hh-seg button:focus-visible{outline:2px solid var(--hh-accent);outline-offset:-2px}
.hh-chip{font-family:var(--hh-mono);font-size:11.5px;padding:5px 12px;
border-radius:var(--hh-r-pill);border:1px solid var(--hh-line-strong);color:var(--hh-muted)}
.hh-chip--live{color:var(--hh-live);
border-color:var(--hh-live); /* fallback */
border-color:color-mix(in srgb,var(--hh-live) 45%,transparent)}
.hh-chip--live::before{content:"\25CF";margin-right:6px;font-size:8px}
.hh-chip--alarm{color:var(--hh-alarm);
border-color:var(--hh-alarm); /* fallback */
border-color:color-mix(in srgb,var(--hh-alarm) 45%,transparent)}
.hh-chip--alarm::before{content:"\25CF";margin-right:6px;font-size:8px}
.hh-chip--warn{color:var(--hh-warn);
border-color:var(--hh-warn); /* fallback */
border-color:color-mix(in srgb,var(--hh-warn) 45%,transparent)}
.hh-chip--warn::before{content:"\25CF";margin-right:6px;font-size:8px}
/* chip floating on a field (frosted) */
.hh-field .hh-chip{background:var(--hh-ground); /* fallback */
background:color-mix(in srgb,var(--hh-ground) 78%,transparent);
backdrop-filter:blur(6px);border-color:transparent}
/* the toast — notices, saves, confirmations; also the plan's pin-card */
.hh-toast{position:absolute;top:calc(100% + 6px);left:50%;
transform:translateX(-50%) translateY(-4px);
background:var(--hh-raised);border:1px solid var(--hh-line-strong);
border-radius:var(--hh-r-tip);box-shadow:var(--hh-shadow);padding:8px 14px;
white-space:nowrap;pointer-events:none;opacity:0;z-index:60;
transition:opacity 160ms ease,transform 160ms cubic-bezier(.16,1,.3,1)}
.hh-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.hh-toast b{font-weight:600;font-size:.92rem;margin-right:8px}
.hh-toast span{font-family:var(--hh-mono);font-size:11px;color:var(--hh-muted)}
/* THE LIGHT SWITCH — the house's one signature control */
.hh-lightswitch{display:flex;align-items:center;gap:9px;background:none;border:0;
cursor:pointer;color:var(--hh-muted);font-family:var(--hh-mono);font-size:11.5px;padding:4px}
.hh-lightswitch .hh-plate{width:21px;height:34px;border:1px solid var(--hh-line-strong);
border-radius:var(--hh-r-plate);background:var(--hh-raised);position:relative;flex:none;
transition:border-color 300ms ease}
.hh-lightswitch .hh-rocker{position:absolute;left:3px;right:3px;top:3px;height:12px;
border-radius:3px;background:var(--hh-faint);
transition:top 300ms cubic-bezier(.2,.8,.2,1),background 300ms ease}
html.night .hh-lightswitch .hh-rocker{top:calc(100% - 15px);background:rgb(var(--hh-lamp))}
html.night .hh-lightswitch .hh-plate{border-color:rgba(var(--hh-lamp),.45)}
.hh-lightswitch:focus-visible{outline:2px solid var(--hh-accent);outline-offset:3px;
border-radius:var(--hh-r-plate)}
/* THE CARET — dev register only, once per surface, on the area's title */
.hh-caret::after{content:"\258B";color:var(--hh-accent);margin-left:2px;
animation:hh-blink 1.15s steps(1,end) infinite}
/* THE LIVING HOUSE — the miniature plan */
.hh-miniplan{position:relative;display:grid;grid-template-columns:repeat(3,20px);
grid-auto-rows:15px;border:1px solid var(--hh-line-strong);overflow:hidden;
border-radius:var(--hh-r-cell);flex:none}
.hh-miniplan i{border:.5px solid var(--hh-line)}
.hh-miniplan i[data-room]{cursor:pointer}
.hh-miniplan i.lit{background:rgba(var(--hh-lamp),.32);transition:background 300ms ease}
.hh-miniplan i.glow{background:rgba(var(--hh-lamp),.85)}
.hh-miniplan .hh-daylight{position:absolute;top:0;bottom:0;width:42%;left:-12%;
background:rgba(var(--hh-lamp),.15);animation:hh-drift 24s ease-in-out infinite alternate;
pointer-events:none}
html.night .hh-miniplan .hh-daylight{display:none}
html.night .hh-miniplan i.lit{animation:hh-hearth 5.5s ease-in-out infinite alternate}
/* ---------------- house-motion v1: the pack ----------------
Nine named moves. Restraint law: at most one ambient loop in
view; everything else on hover; the caret once per surface. */
@keyframes hh-blink{0%,45%{opacity:1}46%,100%{opacity:0}}
@keyframes hh-drift{from{left:-12%}to{left:72%}}
@keyframes hh-hearth{from{background:rgba(var(--hh-lamp),.18)}to{background:rgba(var(--hh-lamp),.5)}}
@keyframes hh-fillup{from{max-width:0}to{max-width:10ch}}
@keyframes hh-pinpop{0%,52%{transform:scale(0)}57%{transform:scale(1.5)}61%,86%{transform:scale(1)}100%{transform:scale(0)}}
/* hh-type is per-use: animation:hh-type Xs steps(n,end); define width in ch at the call site */
@keyframes hh-type{from{width:0}to{width:var(--hh-type-ch,21ch)}}
/* fillup helper: wrap the filled glyphs, run on the row's hover */
.hh-fill{display:inline-block;overflow:hidden;vertical-align:bottom;
white-space:nowrap;color:var(--hh-accent)}
.hh-measure:hover .hh-fill{animation:hh-fillup 1.1s steps(10,end) 1}
/* motion is a courtesy, never a requirement */
@media (prefers-reduced-motion:reduce){
.hh-ground *,.hh-ground{transition:none!important;animation:none!important}
}