/* ═══════════════════════════════════════════════════════════════════════
elsewhere — tokens.css · THE one place the look is defined (2026-10-08)
───────────────────────────────────────────────────────────────────────
Every surface loads this first and reads from it:
· the team website public/site/index.html
· the waitlist page src/app/layout.tsx
src/app/globals.css maps Tailwind's @theme to these
· the 3D planner public/app/index.html
Change a value here and all three move together. The surfaces keep their
own class names; their :root variables are aliases of the --ew-* tokens
below, so nothing has to be renamed to pick up a change.
The look (Imogen, 2026-10-07/08): pink + silver chrome + ink + warm
neutrals on a dusty plaster-pink ground with white panels. Plum/purple is
NOT a brand colour. Mint/lilac/lime/peach exist only as background glows.
No stickers, sparkles or tilted elements.
Type: Bruno Ace = headings and buttons · Figtree = everything people read
· Courier Prime = small caps labels and numbers only. Mac window title
bars keep the system face. Logo = always the chrome PNG
/app/assets/logo-elsewhere.png on the pink gel pill.
brand.css (older kit, bone/coral/Courier-body) is superseded by this file.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* ── Ground & surfaces ─────────────────────────────────────────────── */
--ew-ground: #EBDCD9; /* page background: dusty plaster pink (her pick "B") */
--ew-ground-glow: radial-gradient(1200px 700px at 50% -15%, rgba(255,255,255,.35), transparent 65%);
--ew-panel: #FFFFFF; /* window bodies, cards, product tiles */
--ew-paper: #FBF7EF; /* warm off-white: inputs on pink, planner panels */
--ew-bone: #EFE9DD; /* the previous ground ("classic"); planner canvas */
--ew-mushroom: #D8D0C0; /* behind-the-stage */
/* ── Ink ───────────────────────────────────────────────────────────── */
--ew-ink: #241F1A; /* text */
--ew-ink-soft: rgba(36,31,26,.75);
--ew-muted: #746553; /* captions, secondary text (4.5:1 on white) */
--ew-label: #8A7A68; /* grey-brown caps labels on the calm ground */
/* ── Pink (the signature) ──────────────────────────────────────────── */
--ew-pink: #FF2E88; /* hot: badges, active outlines, big accents (≥18px text only) */
--ew-pink-mid: #FF54A8; /* gel mid-tone */
--ew-pink-hot: #C4196E; /* deep: small pink TEXT, gel base, borders on pink */
--ew-pink-soft: #FF9ECF; /* rims, highlights */
--ew-pink-light: #FFB3DC; /* gel top highlight */
--ew-pink-track: #FDEAF2; /* pale pink surfaces, toggled-on backgrounds */
/* ── Chrome (brushed silver) ───────────────────────────────────────── */
--ew-chrome: linear-gradient(180deg, #ffffff 0%, #eef0f4 34%, #c9ccd4 58%, #e9ebf0 82%, #fafbfc 100%);
--ew-chrome-bar: linear-gradient(180deg, #ffffff 0%, #eef0f4 38%, #d5d8df 62%, #e7e9ee 86%, #f7f8fa 100%);
--ew-chrome-nav: linear-gradient(180deg, #ffffff 0%, #f3f4f7 45%, #e3e5eb 100%);
--ew-chrome-line: #b6b9c3;
--ew-chrome-line-2: #c3c6cf;
--ew-chrome-ink: #2a2a31; /* text on chrome */
--ew-chrome-title: #4d4f57; /* window title text */
/* ── Lines ─────────────────────────────────────────────────────────── */
--ew-line: #DDD2BE; /* hairlines on paper */
--ew-line-tan: #C8BBA6; /* input / swatch borders */
--ew-line-pink: #e3d6dd; /* card borders on the plaster ground */
/* ── Glows (backgrounds ONLY, never UI) ────────────────────────────── */
--ew-aura-pink: #FF54A8;
--ew-aura-peach: #FFD6BE;
--ew-aura-mint: #46D6C6;
--ew-aura-lilac: #6E8BFF;
--ew-aura-lime: #C6FF4D;
/* ── Type ──────────────────────────────────────────────────────────── */
--ew-font-display: 'Bruno Ace', 'Arial Black', sans-serif; /* headings, buttons */
--ew-font-body: 'Figtree', -apple-system, 'Helvetica Neue', Arial, sans-serif; /* reading text */
--ew-font-mono: 'Courier Prime', 'Courier New', monospace; /* labels, numbers */
--ew-font-mac: -apple-system, 'Helvetica Neue', 'Lucida Grande', sans-serif; /* window title bars */
--ew-fs-lede: 17px; /* ledes */
--ew-fs-body: 15px; /* reading text */
--ew-fs-small: 13.5px; /* captions, helper lines */
--ew-fs-label: 12.5px; /* caps labels (never smaller) */
--ew-lh-body: 1.5;
--ew-lh-tight: 1.06; /* display headings */
--ew-track-label: .14em;
/* ── Shape, depth, motion ──────────────────────────────────────────── */
--ew-r-pill: 999px;
--ew-r-card: 12px;
--ew-r-window: 9px;
--ew-r-panel: 16px;
--ew-shadow: 0 10px 30px rgba(36,31,26,.16), 0 2px 8px rgba(36,31,26,.07);
--ew-shadow-card: 0 8px 24px rgba(36,31,26,.10);
--ew-shadow-window: 0 18px 40px rgba(196,25,110,.12), 0 2px 8px rgba(36,31,26,.06);
--ew-shadow-pink: 0 6px 16px rgba(196,25,110,.22);
--ew-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
--ew-focus: 0 0 0 3px rgba(255,46,136,.28);
}
/* ═══ Recipes ═══════════════════════════════════════════════════════════
Shared classes any surface can use directly. The site's .gel / .chrome /
.ghost / .chip and the planner's .btn.primary are built from these. */
/* Pink gel button: the primary action everywhere */
.ew-gel {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; padding: 12px 26px; border-radius: var(--ew-r-pill);
font-family: var(--ew-font-display); font-size: 15px; line-height: 1; color: #fff;
text-decoration: none; white-space: nowrap; cursor: pointer;
text-shadow: 0 1px 2px rgba(196,25,110,.45);
background: linear-gradient(180deg, var(--ew-pink-light) 0%, var(--ew-pink-mid) 38%, var(--ew-pink-hot) 100%);
border: 1px solid var(--ew-pink-soft);
box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 3px rgba(196,25,110,.35), var(--ew-shadow-pink);
transition: transform .15s var(--ew-pop), box-shadow .15s;
}
.ew-gel:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 10px rgba(255,46,136,.45), 0 6px 16px rgba(196,25,110,.25); }
.ew-gel:active { transform: translateY(0); }
.ew-gel:disabled { opacity: .55; pointer-events: none; }
.ew-gel.sm { min-height: 40px; padding: 8px 18px; font-size: 13.5px; }
/* Brushed-chrome button: the secondary action, and the Join on pink */
.ew-chrome {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
min-height: 48px; padding: 10px 24px; border-radius: var(--ew-r-pill);
font-family: var(--ew-font-display); font-size: 15px; line-height: 1; color: var(--ew-chrome-ink);
text-decoration: none; white-space: nowrap; cursor: pointer;
background: var(--ew-chrome); border: 1px solid var(--ew-chrome-line);
text-shadow: 0 1px 0 rgba(255,255,255,.9);
box-shadow: inset 0 1px 0 #fff, inset 0 -3px 5px rgba(40,40,60,.12), 0 6px 16px rgba(36,31,26,.16);
transition: transform .15s var(--ew-pop), box-shadow .15s;
}
.ew-chrome:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 5px rgba(40,40,60,.12), var(--ew-focus), 0 8px 20px rgba(36,31,26,.18); }
.ew-chrome:active { transform: translateY(0); }
.ew-chrome:disabled { opacity: .7; cursor: wait; }
.ew-chrome.sm { min-height: 40px; padding: 8px 16px; font-size: 13.5px; }
.ew-chrome.round { width: 36px; height: 36px; min-height: 36px; padding: 0; font-family: var(--ew-font-body); font-size: 22px; font-weight: 600; }
/* Quiet outline button */
.ew-ghost {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 44px; padding: 0 16px; border-radius: var(--ew-r-pill);
border: 1px solid rgba(36,31,26,.6); background: rgba(255,255,255,.6);
font-family: var(--ew-font-body); font-size: 14px; font-weight: 600; color: var(--ew-ink);
text-decoration: none; white-space: nowrap; cursor: pointer;
transition: color .15s, border-color .15s;
}
.ew-ghost:hover { border-color: var(--ew-pink); color: var(--ew-pink-hot); }
/* Small chip (counts, "Night", "Under $100") */
.ew-chip {
display: inline-flex; align-items: center; gap: 6px;
border-radius: var(--ew-r-pill); padding: 4px 10px;
font-family: var(--ew-font-body); font-size: 12.5px; font-weight: 600; color: var(--ew-ink);
background: rgba(255,255,255,.92); border: 1px solid var(--ew-line-pink);
box-shadow: 0 2px 8px rgba(36,31,26,.12);
}
.ew-chip.pink { background: var(--ew-pink-track); color: var(--ew-pink-hot); border-color: var(--ew-pink-soft); }
/* Caps label (kicker) */
.ew-kick {
font-family: var(--ew-font-mono); font-weight: 700; font-size: var(--ew-fs-label);
letter-spacing: var(--ew-track-label); text-transform: uppercase; color: var(--ew-label);
}
/* Mac-2008 window: white body, brushed-chrome title bar, traffic lights */
.ew-win { border-radius: var(--ew-r-window); border: 1px solid #b9bcc6; background: var(--ew-panel); overflow: hidden; box-shadow: var(--ew-shadow-window); }
.ew-win > .ew-tbar { height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 11px; position: relative;
background: var(--ew-chrome-bar); border-bottom: 1px solid var(--ew-chrome-line); box-shadow: inset 0 1px 0 #fff; }
.ew-tbar .ew-tt { position: absolute; inset-inline: 0; text-align: center; font-family: var(--ew-font-mac); font-size: 12px; font-weight: 600; color: var(--ew-chrome-title); text-shadow: 0 1px 0 #fff; pointer-events: none; }
.ew-tl { width: 12px; height: 12px; border-radius: 50%; border: .5px solid rgba(0,0,0,.35); }
.ew-tl.r { background: radial-gradient(circle at 35% 30%, #ff9a8e, #e0463b); }
.ew-tl.y { background: radial-gradient(circle at 35% 30%, #ffe27a, #e3a72f); }
.ew-tl.g { background: radial-gradient(circle at 35% 30%, #b6ef8e, #3da43b); }
/* Logo pill: the chrome PNG on pink gel */
.ew-logo-pill { display: inline-flex; align-items: center; padding: 9px 16px 10px; border-radius: 13px; line-height: 0;
background: linear-gradient(180deg, var(--ew-pink-light) 0%, var(--ew-pink-mid) 42%, var(--ew-pink-hot) 100%);
border: 1px solid var(--ew-pink-soft);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 4px rgba(150,10,80,.25), 0 6px 16px rgba(196,25,110,.28); }
.ew-logo-pill img { filter: drop-shadow(0 1px 0 rgba(90,20,60,.6)) drop-shadow(0 3px 8px rgba(90,20,60,.35)) contrast(1.1); }
/* Text input */
.ew-input { min-height: 48px; padding: 10px 18px; border-radius: var(--ew-r-pill); border: 1px solid var(--ew-line-tan);
background: var(--ew-panel); font-family: var(--ew-font-body); font-size: 16px; color: var(--ew-ink); outline: none; }
.ew-input::placeholder { color: rgba(116,101,83,.7); }
.ew-input:focus { border-color: var(--ew-pink); box-shadow: var(--ew-focus); }
:focus-visible { outline: 2px solid var(--ew-pink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ew-gel, .ew-chrome, .ew-ghost { transition: none; } }