/******************************************************************************
 *                  Dark-mode Colors for the W3C specifications
 *
 * This style sheet overlays base.css in order to provide colors for dark mode.
 * Import this stylesheet via
 *   <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="...">
 *
 ******************************************************************************/

/* In case a transparent-bg image doesn't expect to be on a dark bg,
   which is quite common in practice... */
img { background: white; }

:root {
	--text: #ddd;
	--bg: #222;

	/* Absolute URLs due to https://bugs.webkit.org/show_bug.cgi?id=230243 */
	--unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2021/logos/UD-watermark-dark-unofficial);
	--draft-watermark: url(https://www.w3.org/StyleSheets/TR/2021/logos/UD-watermark-dark-draft);

	--logo-bg: #1a5e9a;
	--logo-active-bg: #c00;
	--logo-text: white;

	--tocnav-normal-text: #999;
	--tocnav-normal-bg: var(--bg);
	--tocnav-hover-text: var(--tocnav-normal-text);
	--tocnav-hover-bg: #080808;
	--tocnav-active-text: #f44;
	--tocnav-active-bg: var(--tocnav-normal-bg);

	--tocsidebar-text: var(--text);
	--tocsidebar-bg: #002a56;        /* CG: blue ToC sidebar (W3C TR: #080808) */
	--tocsidebar-shadow: rgba(255,255,255,.1);
	--tocsidebar-heading-text: #cbe0fb;
	--tocsidebar-link-text: var(--text);
	--tocsidebar-link-underline: var(--text);
	--tocsidebar-link-visited-text: #cbe0fb;
	--tocsidebar-link-visited-underline: #cbe0fb;

	--toclink-text: var(--text);
	--toclink-underline: #6af;
	--toclink-visited-text: var(--toclink-text);
	--toclink-visited-underline: #054572;

	--heading-text: #8af;

	--hr-text: var(--text);

	--algo-border: #456;

	--del-text: #f44;
	--del-bg: transparent;
	--ins-text: #4a4;
	--ins-bg: transparent;

	--a-normal-text: #6af;
	--a-normal-underline: #555;
	--a-visited-text: var(--a-normal-text);
	--a-visited-underline: var(--a-normal-underline);
	--a-hover-bg: rgba(25%, 25%, 25%, .2);
	--a-active-text: #f44;
	--a-active-underline: var(--a-active-text);

	--borderedblock-bg: rgba(255, 255, 255, .05);

	--blockquote-border: silver;
	--blockquote-bg: var(--borderedblock-bg);
	--blockquote-text: currentcolor;

	--issue-border: #e05252;
	--issue-bg: var(--borderedblock-bg);
	--issue-text: var(--text);
	--issueheading-text: hsl(0deg, 70%, 70%);

	--example-border: hsl(50deg, 90%, 60%);
	--example-bg: var(--borderedblock-bg);
	--example-text: var(--text);
	--exampleheading-text: hsl(50deg, 70%, 70%);

	--note-border: hsl(120deg, 100%, 35%);
	--note-bg: var(--borderedblock-bg);
	--note-text: var(--text);
	--noteheading-text: hsl(120, 70%, 70%);
	--notesummary-underline: silver;

	--advisement-border: orange;
	--advisement-bg: #222218;
	--advisement-text: var(--text);
	--advisementheading-text: #f84;

	--amendment-border: #330099;
	--amendment-bg: #080010;
	--amendment-text: var(--text);
	--amendmentheading-text: #cc00ff;

	--warning-border: red;
	--warning-bg: hsla(40,100%,20%,0.95);
	--warning-text: var(--text);

	--def-border: #8ccbf2;
	--def-bg: #080818;
	--def-text: var(--text);
	--defrow-border: #136;

	--datacell-border: silver;

	--indexinfo-text: #aaa;

	--indextable-hover-text: var(--text);
	--indextable-hover-bg: #181818;

	--outdatedspec-bg: rgba(255, 255, 255, .5);
	--outdatedspec-text: black;
	--outdated-bg: maroon;
	--outdated-text: white;
	--outdated-shadow: red;

	--editedrec-bg: darkorange;

	/**************************************************************************/
	/*             Community Group additions (see PROVENANCE.md)              */
	/**************************************************************************/

	--box-bg: #161616;
	--box-table-bg: black;
	--box-table-text: var(--text);

	/* Head blue box */
	--box-bg--head: var(--tocsidebar-bg);
	--box-border--head: #023e53;
	--box-link-text--head: var(--text);
	--box-link-underline--head: var(--text);
	--box-table-bg--head: #002a56;
	--box-table-th-bg--head: #111;
	--box-table-border--head: var(--text);
	--box-table-text--head: var(--text);

	/* Warning (red) */
	--box-bg--warning: #771009;

	/* link--button */
	--link--button--bg: #005a9c;
	--link--button--text: white;
	--link--button--border: #005a9c;
	--link--button--bg--hover: black;
	--link--button--text--hover: white;
	--link--button--border--hover: black;
}

/******************************************************************************
 *    Community Group additions: dark palette for the bikeshed boilerplate
 *
 *  The generated documents strip every inline @media (prefers-color-scheme:
 *  dark) block, because an @media-gated palette cannot follow the theme
 *  toggle in fixup.js. These rules replace them. Delete this section once
 *  bikeshed emits a body.darkmode companion for its own boilerplate.
 *
 ******************************************************************************/

:root,
body.darkmode {
	/* Boilerplate: style-dfn-panel */
	--dfnpanel-bg: #222;
	--dfnpanel-text: var(--text);
	--dfnpanel-target-bg: #333;
	--dfnpanel-target-outline: silver;

	/* Boilerplate: style-mdn-anno */
	--mdn-bg: #222;
	--mdn-shadow: #444;
	--mdn-nosupport-text: #666;
	--mdn-pass: #690;
	--mdn-fail: #d22;

	/* Boilerplate: style-ref-hints */
	--ref-hint-bg: #222;
	--ref-hint-text: var(--text);

	/* Boilerplate: style-syntax-highlighting */
	& .highlight:not(.idl) { background: rgba(255, 255, 255, .05); }

	& c-[a] { color: #d33682 } /* Keyword.Declaration */
	& c-[b] { color: #d33682 } /* Keyword.Type */
	& c-[c] { color: #2aa198 } /* Comment */
	& c-[d] { color: #2aa198 } /* Comment.Multiline */
	& c-[e] { color: #268bd2 } /* Name.Attribute */
	& c-[f] { color: #b58900 } /* Name.Tag */
	& c-[g] { color: #cb4b16 } /* Name.Variable */
	& c-[k] { color: #d33682 } /* Keyword */
	& c-[l] { color: #657b83 } /* Literal */
	& c-[m] { color: #657b83 } /* Literal.Number */
	& c-[n] { color: #268bd2 } /* Name */
	& c-[o] { color: #657b83 } /* Operator */
	& c-[p] { color: #657b83 } /* Punctuation */
	& c-[s] { color: #6c71c4 } /* Literal.String */
	& c-[t] { color: #6c71c4 } /* Literal.String.Single */
	& c-[u] { color: #6c71c4 } /* Literal.String.Double */
	& c-[ch] { color: #2aa198 } /* Comment.Hashbang */
	& c-[cp] { color: #2aa198 } /* Comment.Preproc */
	& c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */
	& c-[c1] { color: #2aa198 } /* Comment.Single */
	& c-[cs] { color: #2aa198 } /* Comment.Special */
	& c-[kc] { color: #d33682 } /* Keyword.Constant */
	& c-[kn] { color: #d33682 } /* Keyword.Namespace */
	& c-[kp] { color: #d33682 } /* Keyword.Pseudo */
	& c-[kr] { color: #d33682 } /* Keyword.Reserved */
	& c-[ld] { color: #657b83 } /* Literal.Date */
	& c-[nc] { color: #268bd2 } /* Name.Class */
	& c-[no] { color: #268bd2 } /* Name.Constant */
	& c-[nd] { color: #268bd2 } /* Name.Decorator */
	& c-[ni] { color: #268bd2 } /* Name.Entity */
	& c-[ne] { color: #268bd2 } /* Name.Exception */
	& c-[nf] { color: #268bd2 } /* Name.Function */
	& c-[nl] { color: #268bd2 } /* Name.Label */
	& c-[nn] { color: #268bd2 } /* Name.Namespace */
	& c-[py] { color: #268bd2 } /* Name.Property */
	& c-[ow] { color: #657b83 } /* Operator.Word */
	& c-[mb] { color: #657b83 } /* Literal.Number.Bin */
	& c-[mf] { color: #657b83 } /* Literal.Number.Float */
	& c-[mh] { color: #657b83 } /* Literal.Number.Hex */
	& c-[mi] { color: #657b83 } /* Literal.Number.Integer */
	& c-[mo] { color: #657b83 } /* Literal.Number.Oct */
	& c-[sa] { color: #6c71c4 } /* Literal.String.Affix */
	& c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */
	& c-[sc] { color: #6c71c4 } /* Literal.String.Char */
	& c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */
	& c-[sd] { color: #6c71c4 } /* Literal.String.Doc */
	& c-[se] { color: #6c71c4 } /* Literal.String.Escape */
	& c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */
	& c-[si] { color: #6c71c4 } /* Literal.String.Interpol */
	& c-[sx] { color: #6c71c4 } /* Literal.String.Other */
	& c-[sr] { color: #6c71c4 } /* Literal.String.Regex */
	& c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */
	& c-[fm] { color: #268bd2 } /* Name.Function.Magic */
	& c-[vc] { color: #cb4b16 } /* Name.Variable.Class */
	& c-[vg] { color: #cb4b16 } /* Name.Variable.Global */
	& c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */
	& c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */
	& c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */

	/* Boilerplate: style-var-click-highlighting */
	& var[data-var-color] { --var-bg: #bc1a00; }
	& var[data-var-color="1"] { --var-bg: #007f00; }
	& var[data-var-color="2"] { --var-bg: #008698; }
	& var[data-var-color="3"] { --var-bg: #7f5b2b; }
	& var[data-var-color="4"] { --var-bg: #004df3; }
	& var[data-var-color="5"] { --var-bg: #a1248a; }
	& var[data-var-color="6"] { --var-bg: #ff0000; }
}