/* ============================================================================
   MUSEION HOUSE — design-system tokens (Claude Design)
   Distilled from _shared-brand-kit/canon/MUSEION_BRAND_CANON.css (canon).
   Doctrine: the brand IS the pink -> purple gradient on the void. Gold is a
   restrained accent (labels/keylines), never a fill. Tritone (pink->gold->purple)
   is reserved for the Museion apex wordmark + Ascent only. No blue. Green is a
   single functional signal (the Sovereign LED), not a brand colour.
   ============================================================================ */

/* —— Type (Museion Type Library; TTFs live beside this file) —— */
@font-face{font-family:"Oasira Display";src:url("assets/fonts/OasiraDisplay-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Operara";src:url("assets/fonts/Operara-Regular.ttf") format("truetype");font-display:swap}

:root{
  /* Surfaces (the void) */
  --void:#050509; --surface:#0d0d14; --surface-2:#12121c; --surface-card:rgba(255,255,255,.035);
  /* Ink */
  --ink:#f5f5f7; --text-1:#f5f5f7; --text-2:#d8d8e0; --text-3:#9a9aa8; --text-4:#676778;
  /* Lines */
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.04);
  /* The brand: pink -> purple */
  --pink:#ff558e; --pink-deep:#ff7aa6; --purple:#b070d8; --purple-deep:#9550c2; --diamond:#d8baf0;
  /* Gold: restrained accent only */
  --gold:#ffc870; --gold-deep:#ffd590;
  /* Gradients */
  --grad-brand:linear-gradient(135deg,var(--pink) 0%,var(--purple) 100%);
  --grad-tritone:linear-gradient(100deg,var(--pink) 0%,var(--gold) 50%,var(--purple) 100%); /* wordmark + Ascent ONLY */
  --grad-divider:linear-gradient(90deg,transparent,var(--pink) 30%,var(--purple) 70%,transparent);
  /* Status */
  --status-live:var(--pink); --status-pending:var(--gold); --status-sealed:var(--purple); --status-muted:var(--text-4);
  /* Functional signal (not brand) */
  --sovereign:#7fd9a8;
  /* Type roles — Museion house = Oasira Display + Operara (Pharos & Mirael dropped 2026-07-06) */
  --f-display:"Oasira Display",Georgia,serif; /* masthead · wordmark · headings */
  --f-flagship:var(--f-display); --f-tech:var(--f-display); --f-ceremony:var(--f-display); /* legacy aliases → Oasira */
  --f-body:"Operara",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* HUD / addresses / labels */
  /* Radii */
  --r:14px; --r-md:8px; --r-sm:4px; --r-pill:999px;
}

/* —— Card canvas (every preview shares this so tiles read as one system) —— */
.ds{background:var(--void);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(760px 420px at 82% -10%,rgba(176,112,216,.10),transparent 60%),
                   radial-gradient(620px 360px at 8% 4%,rgba(255,85,142,.07),transparent 60%);
  min-height:100%;box-sizing:border-box}
.ds *{box-sizing:border-box}
.ds .eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--text-4)}
.ds .title{font-family:var(--f-flagship);letter-spacing:.04em;font-weight:400}
.ds .muted{color:var(--text-3)}
.ds .midot{color:var(--gold)}

/* —— Component helpers (used by the component cards) —— */
.btn{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-radius:var(--r-pill);
  padding:11px 22px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.btn--primary{background:var(--grad-brand);color:#fff;border:none}
.btn--ghost{background:transparent;color:var(--text-1);border:1px solid var(--line-strong)}
.btn--gold{background:transparent;color:var(--gold);border:1px solid rgba(255,200,112,.5)}
.pill{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:4px 11px;color:var(--text-2);display:inline-flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.panel{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(6px)}
.divider{height:1px;background:var(--grad-divider)}