/*
 * Nightcap — a dark "brass on ink" theme for Movim
 * ------------------------------------------------
 * Drop-in replacement for public/theme/css/color.css.
 * Everything Movim already styles through its --movim-* variables is
 * re-tuned here; the extra polish lives in the "Nightcap details"
 * section at the bottom of this file.
 *
 * Always dark: light mode, the night-mode toggle and the OS setting
 * all resolve to the same palette.
 *
 * Contrast (WCAG 2.x), measured on the ink ground #0D0F14:
 *   body text  (font @ .87)  12.6:1
 *   secondary  (font @ .54)   5.4:1
 *   faintest   (font @ .50)   4.7:1
 *   brass accent as text      8.5:1
 *   ink text on brass fill    8.3:1
 *   every palette colour      >= 6.9:1 as text, >= 6.8:1 under ink text
 *
 * Revert with:  git checkout -- public/theme/css/color.css
 */

/* Colour tokens */

body,
body.nightmode {
    /* Grounds */
    --movim-background-main: 13, 15, 20;      /* #0D0F14  ink        */
    --movim-background: 24, 27, 35;           /* #181B23  smoke      */
    --movim-gray: 13, 15, 20;
    /* Type */
    --movim-font: 244, 238, 227;              /* #F4EEE3  ivory      */
    --movim-header-font: 222, 212, 194;       /* #DED4C2  parchment  */
    /* Hover / pressed wash: a whisper of brass */
    --movim-element-action: 205, 167, 102;    /* #CDA766  brass      */
    /* Depth */
    --movim-shadow: 0, 0, 0;
    --movim-shadow-strength: 1.8;
    scrollbar-color: rgba(var(--movim-font), 0.12) transparent;

    /* Nightcap-only tokens */
    --nc-on-accent: 21, 18, 12;               /* #15120C  text on accent fills */
    --nc-own-bubble: 38, 33, 25;              /* #262119  your own messages    */
    --nc-hairline: rgba(205, 167, 102, 0.22); /* brass rule                    */
    --nc-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
        Palatino, "Book Antiqua", Georgia, serif;

    color-scheme: dark;
}

/*
 * Palette — Movim's Material colours re-cut as muted patinas.
 * These also drive the accent-colour picker in Settings, so every
 * choice there stays legible. "dorange" (Movim's default accent)
 * becomes the signature brass. `html body` outranks the Colors widget.
 */
html body {
    --p-dorange: #CDA766;  /* brass      */
    --p-orange:  #D39068;  /* copper     */
    --p-amber:   #DCC28E;  /* champagne  */
    --p-yellow:  #DCCE86;  /* straw      */
    --p-lime:    #BAC47E;  /* chartreuse */
    --p-lgreen:  #A2C28A;  /* pistachio  */
    --p-green:   #8CB89A;  /* sage       */
    --p-teal:    #72B6AB;  /* verdigris  */
    --p-cyan:    #7CB7C7;  /* sea glass  */
    --p-lblue:   #8BB1D8;  /* cornflower */
    --p-blue:    #97A9DE;  /* periwinkle */
    --p-indigo:  #A5A3E0;  /* iris       */
    --p-dpurple: #B6A0DA;  /* wisteria   */
    --p-purple:  #C79ED3;  /* orchid     */
    --p-pink:    #DB9DB6;  /* rose       */
    --p-red:     #E5918C;  /* rosewood   */
    --p-black:   #2A2F3B;  /* gunmetal   */
    --p-gray:    #9A9CA4;  /* pewter     */
}

body>*,
.context_menu,
.icon-text,
.tabs a,
input,
textarea,
select {
    color: rgba(var(--movim-font), 0.87);
}

/* Hide the "Universal share button" bookmarklet card on the News page */
html body ul.card:has(a[href^="javascript:"]) {
    display: none;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    color: rgba(var(--movim-font), 0.67);
}

ul.list li.divided:after,
*.divided:not(.spaced):not(li)>*:not(:last-child):not(.subheader):after,
*.divided.spaced>*:not(:last-child):after,
hr:not(.clear),
.card>.block:not(.subheader):not(.simple),
*.divided>*:not(:last-child) {
    border-color: rgba(var(--movim-font), 0.12);
}

ul.list li span.control.divided:before {
    border-color: rgba(var(--movim-font), 0.128);
}

label,
span.info,
li div.bubble:after,
ul.list li>div>p>span.second,
table tr th {
    color: rgba(var(--movim-font), 0.54);
}

ul.list li.color>div>p>span.second {
    color: rgba(var(--nc-on-accent), 0.72);
}

body,
#drawer .card>.block:not(.subheader):not(.simple):not(.color) {
    background-color: rgb(var(--movim-background-main));
}

.drawer,
.dialog,
ul.context_menu,
ul>li.date>div>p,
.card>.block:not(.subheader):not(.simple):not(.color) {
    background-color: rgb(var(--movim-background));
}

main>header a,
.icon:not(.placeholder):not(.active) a,
.color input {
    color: rgb(var(--movim-font));
}

.button.color,
.color,
span.icon span.counter,
span.icon[data-counter]:after,
span.icon.composing:after,
form>div .checkbox>input[type="checkbox"]:checked:before,
form>div .radio>input[type="radio"]:checked+label {
    border-color: var(--movim-accent);
    background-color: var(--movim-accent);
    color: rgb(var(--nc-on-accent));
}

span.icon span.counter:not(.alt) {
    color: rgb(var(--nc-on-accent));
}

span.icon span.counter.alt {
    color: var(--movim-font);
    background-color: rgb(var(--movim-background-main));
}

/* Elements */

ul li.action>div.action,
ul li.action>form>div.action,
.button.dorange,
.icon.dorange,
span.resource.dorange {
    color: var(--p-dorange)
}

li div.bubble.moderator:after,
ul li div>p>span.moderator,
.button.orange,
.icon.orange,
span.resource.orange {
    color: var(--p-orange);
}

.button.amber,
.icon.anber,
span.resource.amber {
    color: var(--p-amber)
}

.button.yellow,
.icon.yellow,
span.resource.yellow {
    color: var(--p-yellow);
}

.button.lime,
.icon.lime,
span.resource.lime {
    color: var(--p-lime)
}

.button.lgreen,
.icon.lgreen,
span.resource.lgreen {
    color: var(--p-lgreen);
}

.button.green,
.icon.green,
span.resource.green {
    color: var(--p-green);
}

.button.teal,
.icon.teal,
span.resource.teal {
    color: var(--p-teal)
}

.button.cyan,
.icon.cyan,
span.resource.cyan {
    color: var(--p-cyan)
}

.button.lblue,
.icon.lblue,
span.resource.lblue {
    color: var(--p-lblue)
}

.button.blue,
.icon.blue,
span.resource.blue {
    color: var(--p-blue);
}

.button.red,
.icon.red,
span.resource.red,
p.encrypted.error {
    color: var(--p-red);
}

.button.indigo,
.icon.indigo,
span.resource.indigo {
    color: var(--p-indigo);
}

.button.dpurple,
.icon.dpurple,
span.resource.dpurple {
    color: var(--p-dpurple);
}

.button.purple,
.icon.purple,
span.resource.purple {
    color: var(--p-purple);
}

.button.pink,
.icon.pink,
span.resource.pink {
    color: var(--p-pink)
}

.button.black,
.icon.black,
span.resource.black {
    color: var(--p-black);
}

.button.gray,
.icon.gray,
span.resource.gray {
    color: var(--p-gray);
}

.color {
    color: rgb(var(--nc-on-accent));
    background-color: var(--movim-accent);
    border-color: var(--movim-accent)
}

.color.gray {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-gray);
    border-color: var(--p-gray)
}

.color.dorange {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-dorange);
    border-color: var(--p-dorange)
}

.color.orange {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-orange);
    border-color: var(--p-orange)
}

.color.amber {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-amber);
    border-color: var(--p-amber)
}

span.icon:not(.composing):not([data-counter]):not(.story).status.away:after,
.color.yellow {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-yellow);
    border-color: var(--p-yellow)
}

.color.lime {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-lime);
    border-color: var(--p-lime)
}

span.icon:not(.composing):not([data-counter]):not(.story).status.chat:after,
span.icon:not(.composing):not([data-counter]):not(.story).status.online:after,
.color.lgreen {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-lgreen);
    border-color: var(--p-lgreen)
}

.color.green {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-green);
    border-color: var(--p-green)
}

.color.teal {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-teal);
    border-color: var(--p-teal)
}

.color.cyan {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-cyan);
    border-color: var(--p-cyan)
}

.color.lblue {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-lblue);
    border-color: var(--p-lblue)
}

.color.blue {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-blue);
    border-color: var(--p-blue)
}

span.icon:not(.composing):not([data-counter]):not(.story).status.server_error:after,
.color.indigo {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-indigo);
    border-color: var(--p-indigo)
}

.color.dpurple {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-dpurple);
    border-color: var(--p-dpurple)
}

span.icon:not(.composing):not([data-counter]):not(.story).status.xa:after,
.color.purple {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-purple);
    border-color: var(--p-purple)
}

.color.pink {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-pink);
    border-color: var(--p-pink)
}

span.icon:not(.composing):not([data-counter]):not(.story).status.dnd:after,
.color.red {
    color: rgb(var(--nc-on-accent));
    background-color: var(--p-red);
    border-color: var(--p-red)
}

.color.black {
    color: rgb(var(--movim-font));
    background-color: var(--p-black);
    border-color: var(--p-black)
}

.color.none {
    color: white;
    background-color: transparent;
}

.color.transparent {
    color: white;
    backdrop-filter: blur(1rem);
    background-color: rgba(0, 0, 0, 0.25);
}

.color.semi {
    color: rgba(var(--movim-font), 0.87);
    background-color: rgba(var(--movim-background-main), 0.75);
}

form>div>input:focus:invalid,
form>div>input:focus:required {
    box-shadow: 0px 2px 0px var(--p-red);
}

form>div>input:invalid,
form input:focus:invalid+label,
form textarea:focus:invalid+label {
    color: var(--p-red);
}

ul.list li>div>p:not(:first-of-type):not(.main):not(.brief) {
    color: rgba(var(--movim-font), 0.6);
}

ul.list li.color>div>p:not(:first-of-type):not(.main) {
    color: rgba(var(--nc-on-accent), 0.82);
}

header.big ul.list li>div>p:not(:first-of-type):not(.main),
div.snackbar ul.list li>div>p:not(:first-of-type):not(.main) {
    color: rgb(var(--movim-header-font));
}

header.big ul.list li>div>p>span.second {
    color: rgba(var(--movim-header-font), 0.9);
}

/* Default color : indigo */

input[type=button].color,
header.big,
mark,
main>header {
    background-color: var(--movim-accent);
    border-color: var(--movim-accent);
}

/* Accent color */

.tabs,
.button,
header:not(.big) .icon a,
a {
    color: var(--movim-accent);
    border-color: var(--movim-accent);
}

span.control.icon a > i,
span.primary.icon a > i {
    color: rgba(var(--movim-font), 0.68);
}

a.normal {
    color: inherit;
}

form>div .checkbox:before {
    background-color: var(--movim-accent);
}

form input:focus:not(:invalid)+label,
form textarea:focus:not(:invalid)+label {
    color: var(--movim-accent);
}

form>div .select:has(:focus),
form input:focus:not(:invalid):not(.button),
form textarea:focus:not(:invalid):not(.button) {
    box-shadow: 0px 2px 0px var(--movim-accent);
}

/* ================================================================
 * Nightcap details
 * `html body` prefixes let these win over stylesheets that load
 * after color.css (widgets) without resorting to !important.
 * ================================================================ */

/* Selection and focus — brass, never the browser blue */

::selection {
    background-color: rgba(205, 167, 102, 0.35);
    color: rgb(var(--movim-font));
}

html body :focus-visible {
    outline: 2px solid var(--movim-accent);
    outline-offset: 2px;
}

/* Display type: a quiet serif for the big moments only */

html body h1,
html body h2,
html body header.big ul.list li>div>p:first-of-type,
html body article h1 {
    font-family: var(--nc-serif);
    font-weight: 500;
    letter-spacing: 0.01em;
}

html body article h1 {
    font-style: italic;
}

/* Hairlines instead of hard greys */

html body hr:not(.clear),
html body ul.list li.divided:after,
html body *.divided>*:not(:last-child) {
    border-color: rgba(var(--movim-font), 0.08);
}

html body main>header,
html body #chat_widget>header {
    box-shadow: 0 1px 0 var(--nc-hairline);
}

/* Drawers, dialogs, menus: slightly lifted with a brass edge */

html body .dialog,
html body ul.context_menu,
html body .drawer {
    box-shadow: 0 0 0 1px var(--nc-hairline), var(--elevation-6);
}

/* Buttons: stock Movim paints non-accent buttons white */

html body .button:not(.color):not(.flat),
html body input[type=button]:not(.color):not(.flat) {
    background-color: rgb(var(--movim-background));
    box-shadow: inset 0 0 0 1px var(--nc-hairline);
    color: rgb(var(--movim-font));
}

html body .button.color,
html body .button.action {
    color: rgb(var(--nc-on-accent));
}

html body .button.action>i {
    color: rgb(var(--nc-on-accent));
}

/* Chat: your own messages sit in dark bronze */

html body ul li.oppose div.bubble:not(.file),
html body ul li.oppose div.bubble.file div.audio_player {
    background-color: rgb(var(--nc-own-bubble));
    border-color: rgb(var(--nc-own-bubble));
}

html body ul li.oppose div.bubble:not(.file):before {
    background-color: rgb(var(--nc-own-bubble));
}

/* Links read as brass, underlined on hover */

html body article a:not(.button),
html body div.bubble a:not(.button) {
    color: var(--p-amber);
    text-decoration-color: rgba(220, 194, 142, 0.4);
    text-underline-offset: 0.2em;
}

html body article a:not(.button):hover,
html body div.bubble a:not(.button):hover {
    text-decoration-color: currentColor;
}

/* Code: recessed well with ivory text */

html body code,
html body pre,
html body xmp {
    background-color: rgb(8, 9, 12);
    color: rgb(var(--movim-font));
    box-shadow: inset 0 0 0 1px rgba(var(--movim-font), 0.06);
}

html body pre code {
    box-shadow: none;
}

/* Snackbars and toasts */

html body .snackbar,
html body .toast {
    background-color: rgb(var(--movim-background));
    color: rgb(var(--movim-font));
    box-shadow: 0 0 0 1px var(--nc-hairline), var(--elevation-3);
}

/* Live badge on rooms */

html body ul.rooms.list>li>ul>li:not(:first-child)>div>p>span.info.live {
    color: rgb(var(--nc-on-accent));
}

/* Login: replace the orange/blue sweep with a low brass glow on ink */

html body main:has(#login_widget) {
    background:
        radial-gradient(ellipse 70% 55% at 85% 100%, rgba(205, 167, 102, 0.16), transparent 70%),
        radial-gradient(ellipse 60% 50% at 10% 0%, rgba(151, 169, 222, 0.07), transparent 70%),
        rgb(var(--movim-background-main));
}

/* Scrollbars (WebKit) */

html body ::-webkit-scrollbar-thumb {
    background-color: rgba(var(--movim-font), 0.12);
}

html body ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(205, 167, 102, 0.45);
}