/* ============================================================ MELODIC FOUNDRY — FRONT OFFICE MOTIF PRIMITIVES The recurring motifs from the design handoff (board 8b and design/HANDOFF.md "Recurring motifs"), built once and reused by every screen. Depends on tokens.css being loaded first. Page layout lives in site.css — nothing here knows about a specific screen. ============================================================ */ /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--sem-bg); color: var(--sem-text-primary); font-family: var(--mf-font-body); font-size: var(--mf-text-md); line-height: var(--mf-leading-body); -webkit-font-smoothing: antialiased; } a { color: var(--sem-link); text-decoration: none; } /* ---------- theme aliases (8a) ---------- Dark is native; the day shift ([data-theme="light"] on ) swaps -500 hues for their ink pairs per the handoff's rule. These MUST stay custom properties, not attribute-scoped rules: app content renders inside shadow roots, where a `[data-theme] .fo-x` selector can't see the html attribute — inherited properties are the only thing that crosses over. */ :root { --fo-body-bright: var(--mf-lavender-200); --fo-stage-plan-text: var(--stage-plan); --fo-stage-review-text: var(--stage-review); --fo-stage-review-glow: rgba(255, 46, 126, 0.35); --fo-stage-dock-text: var(--stage-dock); --fo-state-quoted-text: var(--state-quoted); --fo-band-bg: var(--mf-plum-1000); --fo-panel-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); } [data-theme="light"] { --fo-body-bright: var(--sem-text-secondary); --fo-stage-plan-text: var(--stage-plan-ink); --fo-stage-review-text: var(--stage-review-ink); --fo-stage-review-glow: rgba(192, 16, 89, 0.18); --fo-stage-dock-text: var(--stage-dock-ink); --fo-state-quoted-text: var(--mf-blue-700); --fo-band-bg: var(--mf-lavender-100); --fo-panel-shadow: var(--sem-elev-2); } /* ---------- type roles ---------- */ /* Signage only: heroes, stamps, plaques, section titles, big prices. */ .fo-stencil { font-family: var(--mf-font-display); font-weight: 400; letter-spacing: var(--mf-track-sign); } /* Labels, data, microcopy — never content a user must read to proceed. */ .fo-mono { font-family: var(--mf-font-mono); font-weight: 600; font-size: 11px; letter-spacing: var(--mf-track-label); text-transform: uppercase; color: var(--sem-text-muted); } /* ---------- buttons ---------- */ .fo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: var(--btn-pad); border: 1px solid transparent; border-radius: var(--btn-radius); font: var(--btn-font); cursor: pointer; transition: all var(--mf-dur-base) var(--mf-ease-out); } .fo-btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-ink); } .fo-btn-primary:hover { background: var(--btn-primary-hover); } .fo-btn-primary.fo-glow { box-shadow: var(--sem-glow-accent); } .fo-btn-outline { background: transparent; color: var(--sem-text-primary); border-color: var(--btn-ghost-border); } .fo-btn-outline:hover { border-color: var(--sem-link); color: var(--sem-accent-hover); } .fo-btn-lg { padding: var(--btn-pad-lg); font-size: 15px; } /* Mono-labelled button (the header's SIGN IN). */ .fo-btn-mono { font-family: var(--mf-font-mono); font-weight: 600; font-size: 11px; letter-spacing: var(--mf-track-label); text-transform: uppercase; padding: 9px 15px; } /* Mono label buttons: COPY, EDIT, START OVER … */ .fo-chip { display: inline-flex; align-items: center; padding: var(--btn-mono-chip); border: 1px solid var(--sem-border-strong); border-radius: var(--mf-radius-full); background: transparent; font-family: var(--mf-font-mono); font-weight: 600; font-size: 11px; /* Explicit, because the element decides otherwise: a