/******************************************************************************
 *                  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: black;
/* s24 v13 */
--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: #080808;
  --tocsidebar-bg: #04303e;        
/* s24 v13 */
--tocsidebar-bg: #002a56;   

	--tocsidebar-shadow: rgba(255,255,255,.1);
	--tocsidebar-heading-text: var(--heading-text);
/* s24 v13 */
--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: var(--borderedblock-bg);
	--amendment-text: var(--text);
	--amendmentheading-text: #a086ff;

	--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;
  --box-bg: #161616;
  --box-table-bg: black;
  --box-table-text: var(--text);
  --box-button--hover: black;

  /* Head dark blue box */
  --box-bg--head: var(--tocsidebar-bg);
  --box-border--head: #023e53;
  --box-text--head: var(--text);
  --box-table-bg--head: #002a56;
  --box-table-border--head: #ddd;
  --box-table-text--head: var(--text);
  --box-table-text-dec--head: var(--text);
  --box-table-th-bg--head: #111;
/* s24 v13 */
  --box-link-text--head: #ddd;
  --box-link-text-underline--head: #ddd;
/* s24 v13 */
--link--button-bg: #005a9c;
--link--button-text: white;
--link--button-border: #005a9c;
--link--button-bg--hover: #000;
--link--button-text--hover: white;
--link--button-border--hover: #000;

  /* Box - Warning (red) */
  --box-bg--warning: #771009;
  --icon--head: var(--text);

}


  /* from bikeshed inline style */
  /* 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-vg: #ff0000; }
}