/* The Deep purple palette, chosen by Savas on 25 Sept 2026 over machine yellow, the same as
   rooney-systems-site/assets/palette.css. Loads after base.css, hub.css and product.css and only overrides.
   Beige paper, a deep aubergine signature field that always carries beige type, a lilac second field,
   a near black night. The token name --yellow is kept: it is the signature slot, and it now holds the aubergine.
   The rule: ink never sits on the aubergine. What was ink on yellow turns beige; what was yellow on ink turns lilac. */

:root {
  --paper: #EFE8DA;        /* beige page ground */
  --ink: #1C1622;          /* near black, a breath of purple */
  --ink-soft: #4E4658;     /* secondary pixel text */
  --yellow: #3B1C5A;       /* the signature: deep aubergine */
  --steel: #CDBDF0;        /* second field: lilac */
  --night: #1C1622;        /* the night is ink */
  --night-line: #3A3242;
  --night-soft: #B7AEC4;
  --win: #E0D5C0;          /* window body: sand beige */
  --win-field: #F7F2E8;    /* recessed wells: cream */
  --rule: #CDC1AA;         /* hairlines as a beige step */
  --deep-rule: color-mix(in srgb, var(--paper) 72%, var(--yellow));
}

/* ---------- Selection and focus ---------- */
::selection { background: var(--yellow); color: var(--paper); }
.field-yellow ::selection, .demo-block .demo-head ::selection { background: var(--paper); color: var(--yellow); }
.field-night ::selection { background: var(--steel); color: var(--ink); }
/* ink and aubergine blocks: an aubergine selection would vanish there, so it turns lilac */
.win-bar::selection, .win-bar ::selection, .chassis-bar ::selection, .btn::selection, .btn ::selection, .chip-ink::selection, .chip-ink ::selection, .transcript .sil::selection, .phone ::selection, .more-card .mc-n::selection, .chat-title::selection, .row .s::selection, .wait .msg.err::selection,
.transcript .fw::selection, .done-chip::selection, .brandcard span::selection, .wait .msg.ok::selection, .entry .e-cat::selection, .btn.booked::selection, .toast::selection, .chip[aria-current="page"]::selection, .chip[aria-current="page"] ::selection, .row:hover ::selection,
.demo-block .demo-head .callout::selection { background: var(--steel); color: var(--ink); }
.field-yellow :focus-visible { outline-color: var(--paper); }
.field-night :focus-visible { outline-color: var(--steel); }
.nav .chip-ink:focus-visible { outline-color: var(--steel); }
.nav .chip[aria-current="page"]:focus-visible, .nav .chip:hover:focus-visible { outline-color: var(--paper); }

/* ---------- Everything that was ink on yellow becomes beige on aubergine ---------- */
.chip:hover, .chip[aria-current="page"], .chip-ink:hover { color: var(--paper); }
.btn:hover, .ghost:hover { color: var(--paper); }
.btn.booked[disabled] { color: var(--paper); }
.toast { color: var(--paper); }

/* hub: the early access field and a hovered machine row */
.field-yellow { color: var(--paper); }
.field-yellow .how-cell { border-left-color: var(--deep-rule); }
.row:hover { color: var(--paper); }
.row:hover .p { border-color: var(--paper); }
.row:hover .s { background: var(--paper); color: var(--yellow); }

/* machine pages: the sandbox field, its heading and its tag */
.demo-block .demo-head { color: var(--paper); }
.demo-block .demo-head .callout { background: var(--paper); color: var(--yellow); }
.wait .msg.ok { color: var(--paper); }
.done-chip { color: var(--paper); }
.transcript .fw { color: var(--paper); }
.entry .e-cat { color: var(--paper); }
.brandcard span { border-color: var(--paper); color: var(--paper); }
.more-card:hover { color: var(--paper); box-shadow: inset 0 0 0 2px var(--yellow), inset 0 0 0 3px var(--paper); }
.more-card:hover img { border-bottom-color: var(--paper); }

/* ---------- Yellow on ink becomes lilac (aubergine would vanish on ink) ---------- */
.row .s { color: var(--steel); }
.wait .msg.err { color: var(--steel); }
.foot-row a:hover { color: var(--steel); }
/* the caption's key word on the ink phone: a lilac marker, ink type */
.cap .w.key { background: var(--steel); color: var(--ink); }

/* ---------- The steam over the machine page text ----------
   Yellow dither behind ink type was quiet; aubergine dither is nearly ink and blurs the headline and lede.
   On two column layouts the plume keeps its full strength behind the waitlist window and fades to a
   whisper (about the old yellow's weight) over the text column. The ramp spans the column gap. */
@media not all and (max-width: 900px) {
  .p-hero .steam {
    --col2: min(50% + 190px, 96.5% - 380px);   /* left edge of the waitlist column (see product.css grid) */
    -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .2) calc(var(--col2) - clamp(32px, 5vw, 72px)), #000 var(--col2));
    mask-image: linear-gradient(90deg, rgb(0 0 0 / .2) calc(var(--col2) - clamp(32px, 5vw, 72px)), #000 var(--col2));
  }
}

/* ---------- Hard coded greys as palette steps ---------- */
.phone::before { background: var(--night-line); }