/* invo.cy's colours for the web app at invo.cy, loaded after app.css:
   Wavell's gold and cream (the landing page's) in place of the bottle
   green, and the invo.cy ribbon under the header. Only the tokens change;
   every rule stays app.css's. */

:root {
  --paper:        #fffaf5;
  --surface:      #ffffff;
  --surface-sunk: #fbf1e6;
  --surface-hover:#fff6ec;

  --ink:          #1a0e00;
  --ink-2:        #4a3a24;
  --ink-3:        #7a6650;
  --ink-4:        #a8957c;

  --line:         #efe3d3;
  --line-strong:  #e1cfb6;

  --news-dot:     #8410c4; /* the violet in the logo */
  --accent:       #9a690f;
  --accent-hover: #885c09;
  --accent-soft:  #fff1de;
  --accent-line:  #f0d6ae;

  --focus:        #9a690f;

  --ribbon: linear-gradient(90deg, #f9c80e 0%, #ff8a00 28%, #f2203a 52%, #d41bb6 74%, #7b2ff7 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #221c13;
    --surface:      #2b2418;
    --surface-sunk: #1a150e;
    --surface-hover:#352c1f;

    --ink:          #f3e7d6;
    --ink-2:        #c9b89f;
    --ink-3:        #9a8a72;
    --ink-4:        #6c5f4d;

    --line:         #443727;
    --line-strong:  #584830;

    --accent:       #e0b25a;
    --accent-hover: #ecc576;
    --accent-soft:  #382a13;
    --accent-line:  #5d4822;

    --focus:        #e0b25a;
  }
}

:root[data-theme="dark"] {
  --paper:        #221c13;
  --surface:      #2b2418;
  --surface-sunk: #1a150e;
  --surface-hover:#352c1f;

  --ink:          #f3e7d6;
  --ink-2:        #c9b89f;
  --ink-3:        #9a8a72;
  --ink-4:        #6c5f4d;

  --line:         #443727;
  --line-strong:  #584830;

  --accent:       #e0b25a;
  --accent-hover: #ecc576;
  --accent-soft:  #382a13;
  --accent-line:  #5d4822;

  --focus:        #e0b25a;
}

/* The ribbon: under the header, and as the company's mark. */
.topbar { background-image: var(--ribbon); background-size: 100% 3px; background-position: bottom; background-repeat: no-repeat; }
.brand__mark { background: var(--ribbon); }
/* White on the ribbon in both themes: app.css darkens the initials by dark
   for its own light green, which the ribbon is not. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__mark { color: #fff; }
}
:root[data-theme="dark"] .brand__mark { color: #fff; }