/* ============================================================================
   THE INDIGO NIGHT THEME

   Loaded by the discussion and the charter.

   Vish sent a reference: a deep indigo dashboard, vivid violet accent, panels
   lifted off the ground with rounded corners, and status read as colour rather
   than as words. Abhijeet asked for Roboto. Both applied here.

   Not loaded everywhere, on purpose. These are the two pages people sit with:
   the discussion they scan and return to, and the charter they read carefully
   and refer back to. The home page and the privacy note are things you read
   once, and they keep the warm charcoal the rest of the site uses at night.

   This file only ever applies in dark. In daylight the page is exactly as it
   was, because the reference is a night design and forcing indigo onto a cream
   page would be neither.
   ========================================================================= */

/* ---- the palette ---------------------------------------------------------
   Deep indigo rather than neutral charcoal, a violet that carries the
   interactive things, and the four status colours kept separable at a glance:
   green agreed, red against, amber waiting, blue read. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:      #0E0F1A;
    --panel:       #171A2B;
    --ink:         #ECEDF5;
    --ink-2:       #B9BDD1;
    --ink-3:       #8A90A8;
    --rule:        #262A40;
    --rule-strong: #3C4260;

    --disc:        #8E8BFF;   /* discussion: the violet the reference leads with */
    --disc-soft:   #1E2040;
    --debate:      #F0A85C;   /* debate: warm, so the two rooms never blur      */
    --debate-soft: #2A2033;
    --up:          #4ADE80;
    --down:        #F87171;
    --mine:        #1B2036;
    --mine-line:   #6C63C8;

    --violet:      #6C5CE7;
    --violet-lift: #8B7BFF;
    --canvas-rgb:  14,15,26;
  }
}
:root[data-theme="dark"] {
  --canvas:      #0E0F1A;
  --panel:       #171A2B;
  --ink:         #ECEDF5;
  --ink-2:       #B9BDD1;
  --ink-3:       #8A90A8;
  --rule:        #262A40;
  --rule-strong: #3C4260;

  --disc:        #8E8BFF;
  --disc-soft:   #1E2040;
  --debate:      #F0A85C;
  --debate-soft: #2A2033;
  --up:          #4ADE80;
  --down:        #F87171;
  --mine:        #1B2036;
  --mine-line:   #6C63C8;

  --violet:      #6C5CE7;
  --violet-lift: #8B7BFF;
  --canvas-rgb:  14,15,26;
}

/* Everything below is dark only. A single block, repeated for the two ways a
   page can be dark, because CSS has no way to say "either of these". */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --r: 10px;                       /* the corner radius the reference uses */
}
:root:not([data-theme="light"]) .box,
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .quick,
:root:not([data-theme="light"]) .guestbar,
:root:not([data-theme="light"]) .offer,
:root:not([data-theme="light"]) .thead,
:root:not([data-theme="light"]) .post > .inner,
:root:not([data-theme="light"]) .composer,
:root:not([data-theme="light"]) .principle,
:root:not([data-theme="light"]) .tour {
  border-radius: var(--r);
}
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .box,
:root:not([data-theme="light"]) .quick,
:root:not([data-theme="light"]) .thead,
:root:not([data-theme="light"]) .principle {
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 10px rgba(0,0,0,.28);
}
:root:not([data-theme="light"]) .btn:not(.ghost) {
  background: var(--violet); border-color: var(--violet); color: #fff;
}
:root:not([data-theme="light"]) .btn:not(.ghost):hover {
  background: var(--violet-lift); border-color: var(--violet-lift); color: #fff;
}
:root:not([data-theme="light"]) .tabs button[aria-pressed="true"],
:root:not([data-theme="light"]) .kindrow button[aria-pressed="true"],
:root:not([data-theme="light"]) .mode button[aria-pressed="true"] {
  background: var(--violet); border-color: var(--violet); color: #fff;
}
:root:not([data-theme="light"]) .fields button[aria-pressed="true"] {
  background: var(--violet); border-color: var(--violet); color: #fff;
}
:root:not([data-theme="light"]) .searchform,
:root:not([data-theme="light"]) .search input,
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) textarea,
:root:not([data-theme="light"]) select { border-radius: 8px; }
:root:not([data-theme="light"]) .offer {
  background: linear-gradient(90deg, #1E2040 0%, #171A2B 70%);
  border-color: var(--violet);
}
:root:not([data-theme="light"]) .vbtn.up[aria-pressed="true"]   { color: var(--up); }
:root:not([data-theme="light"]) .vbtn.down[aria-pressed="true"] { color: var(--down); }
}

:root[data-theme="dark"] { --r: 10px; }
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .quick,
:root[data-theme="dark"] .guestbar,
:root[data-theme="dark"] .offer,
:root[data-theme="dark"] .thead,
:root[data-theme="dark"] .post > .inner,
:root[data-theme="dark"] .composer,
:root[data-theme="dark"] .principle,
:root[data-theme="dark"] .tour { border-radius: var(--r); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .quick,
:root[data-theme="dark"] .thead,
:root[data-theme="dark"] .principle {
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 10px rgba(0,0,0,.28);
}
:root[data-theme="dark"] .btn:not(.ghost) {
  background: var(--violet); border-color: var(--violet); color: #fff;
}
:root[data-theme="dark"] .btn:not(.ghost):hover {
  background: var(--violet-lift); border-color: var(--violet-lift); color: #fff;
}
:root[data-theme="dark"] .tabs button[aria-pressed="true"],
:root[data-theme="dark"] .kindrow button[aria-pressed="true"],
:root[data-theme="dark"] .mode button[aria-pressed="true"],
:root[data-theme="dark"] .fields button[aria-pressed="true"] {
  background: var(--violet); border-color: var(--violet); color: #fff;
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select { border-radius: 8px; }
:root[data-theme="dark"] .offer {
  background: linear-gradient(90deg, #1E2040 0%, #171A2B 70%);
  border-color: var(--violet);
}
:root[data-theme="dark"] .vbtn.up[aria-pressed="true"]   { color: var(--up); }
:root[data-theme="dark"] .vbtn.down[aria-pressed="true"] { color: var(--down); }

/* ---- Roboto, headings included ---------------------------------------------
   This sheet is loaded by every page except the home page, which is precisely
   the scope Vish asked for, so the rule can simply say "headings" rather than
   listing components. The home page keeps the serif: it is the face of the
   site and the one page whose job is to be looked at rather than used. */
h1, h2, h3,
.card .ctitle {
  font-family: var(--body);
  font-weight: 500;
  letter-spacing: -.015em;
}
h1 { font-weight: 700; }
.card .ctitle { font-weight: 500; }

/* ---- the fields list is two different things at two widths ----------------
   Below 960 it is a row of pills, where filling the selected one with violet
   is exactly right. Above it, it is a plain list with no borders, and filling
   a row turns a quiet list into a violet slab three times the weight of
   anything near it. Same state, different shape, so it needs saying twice. */
/* Note the two blocks. :root:not([data-theme="light"]) matches a page with no
   choice stored, which includes a page in DAYLIGHT, so on its own it would
   tint the fields list violet at noon. It only means "dark" inside a
   prefers-color-scheme query, and that has to be said explicitly here because
   this rule also carries a width. */
@media (min-width: 960px) {
  :root[data-theme="dark"] .fields button[aria-pressed="true"] {
    background: transparent; border: 0; color: var(--violet-lift);
    font-weight: 500; box-shadow: inset 2px 0 0 var(--violet-lift); padding-left: 9px;
  }
}
@media (min-width: 960px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fields button[aria-pressed="true"] {
    background: transparent; border: 0; color: var(--violet-lift);
    font-weight: 500; box-shadow: inset 2px 0 0 var(--violet-lift); padding-left: 9px;
  }
}

/* ---- the blocks inside a debate post --------------------------------------
   A tint that lifts has to go the other way on a dark ground: black on black
   is not a highlight. */
:root[data-theme="dark"] .blk-steel,
:root[data-theme="dark"] .blk-exit { background: rgba(255,255,255,.045); }
/* the darkened daylight label would disappear on this ground */
:root[data-theme="dark"] .blk-exit .tag { color: var(--up); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .blk-steel,
  :root:not([data-theme="light"]) .blk-exit { background: rgba(255,255,255,.045); }
  :root:not([data-theme="light"]) .blk-exit .tag { color: var(--up); }
}