/* The Deep purple palette, chosen by Savas on 25 Sept 2026 over the original machine yellow. Loads after site.css and only overrides.
   Beige paper, a deep aubergine signature field that always carries beige text,
   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. */

: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 */

  /* the hard coded greys of site.css, as beige steps */
  --win-dim: #EAE2D2;
  --well-dim: #D7CBB4;
  --rule: #CDC1AA;
  --tag-rule: #B9AC93;
  --pending: #8F8370;
  --deep-rule: color-mix(in srgb, var(--paper) 72%, var(--yellow));
  --blob: #CDBDF0;         /* the desk's dithered spheres: lilac, since ink vanishes on aubergine */
}

/* scene and file tags that sit straight on the deep field turn beige */
.field-yellow .tag-ink { background: var(--paper); color: var(--yellow); }

/* ---------- The deep field carries beige, never ink ---------- */
.field-yellow { color: var(--paper); }
.field-yellow .col,
.field-yellow .days-grid,
.field-yellow .days-side { border-left-color: var(--deep-rule); }
.field-yellow :focus-visible { outline-color: var(--paper); }
.field-yellow .win :focus-visible { outline-color: var(--ink); }
/* the approve buttons sit on aubergine: the ring is drawn inside the ink button, in lilac */
.field-yellow .win .approve:focus-visible { outline: 2px solid var(--steel); outline-offset: -2px; }
.field-yellow .win .approve:focus-visible:hover { outline-color: var(--ink); }
/* the machine window's ring would cross the lilac dither: a flat aubergine surround keeps it clean */
.field-yellow .d-machine:focus-visible { box-shadow: inset 0 0 0 2px var(--win), inset 0 0 0 3px var(--ink), 0 0 0 7px var(--yellow); }
/* the sandbox popup's controls live on the ink title bar: lilac rings, and the span must not clip them */
.win-bar > span.sandbox-actions:last-child { overflow: visible; }
.sandbox-actions :focus-visible { outline: 2px solid var(--steel); outline-offset: 1px; }

/* halftone: lilac dots over a darker aubergine, so the print layer still reads */
.dotpanel { background-image: radial-gradient(color-mix(in srgb, var(--steel) 50%, var(--yellow)) .9px, transparent 1.1px); }

/* booking tags: inverted to a beige ground with aubergine type */
.px-tags-ink span { background: var(--paper); color: var(--yellow); border-color: var(--paper); }

/* ---------- Everything that was ink on yellow becomes beige on aubergine ---------- */
::selection { background: var(--yellow); color: var(--paper); }
.field-yellow ::selection { background: var(--paper); color: var(--yellow); }
.field-yellow .win ::selection { background: var(--steel); color: var(--ink); }
.field-night ::selection { background: var(--steel); color: var(--ink); }
/* tags and ink blocks whose own colours match the selection: lilac, so a selection always shows */
.field-yellow .tag-ink::selection, .px-tags-ink span::selection, .q-state::selection, .tag-yellow::selection, .win-bar ::selection, .chip-ink ::selection, .px-btn::selection { background: var(--steel); color: var(--ink); }

.chip:hover, .chip-ink:hover { color: var(--paper); }
.big-link:hover { color: var(--paper); }
.px-btn:hover { color: var(--paper); }
.px-big-ink { color: var(--paper); }
.tag-yellow { color: var(--paper); }
.hover-tag { color: var(--paper); }
.log .log-wait > span { color: var(--paper); }
.race-foot-done { color: var(--paper); }
.race-panel.is-running .race-foot-done:not(.shown) { color: var(--ink); }
@media (min-width: 901px) {
  .desk-win.is-dragging .win-bar { background: var(--steel); color: var(--ink); }
}

/* ---------- Yellow type on ink becomes lilac (aubergine would vanish on ink) ---------- */
.d-machine:hover .win-bar { color: var(--steel); }
.approve, .approved { color: var(--steel); }
.approve:hover { color: var(--ink); }
.faq summary:hover { color: var(--steel); }
.faq details a { color: var(--steel); }
.footer-row a:hover { color: var(--steel); }
.sandbox-actions a:hover, .sandbox-actions button:hover { color: var(--steel); }
.field-night :focus-visible { outline-color: var(--steel); }
.nav .chip-ink:focus-visible { outline-color: var(--steel); }
@keyframes log-in { from { background: var(--steel); } to { background: transparent; } }

/* the agent state is the signature: aubergine ground, beige type */
.q-state { background: var(--yellow); color: var(--paper); }

/* ---------- Window greys as beige steps ---------- */
.px-tags span { border-color: var(--tag-rule); }
.px-tags-ink span { border-color: var(--paper); }
.queue-list li { border-bottom-color: var(--rule); }
.queue-list li.is-team .q-state { background: transparent; color: var(--ink-soft); outline-color: var(--pending); }
.win-dim { background: var(--win-dim); box-shadow: inset 0 0 0 2px var(--win-dim), inset 0 0 0 3px var(--ink); }
.race-team .term-body { background: var(--well-dim); }
.sandbox-win::backdrop { background-color: rgba(28, 22, 34, .4); background-image: radial-gradient(rgba(28, 22, 34, .55) .9px, transparent 1.1px); }