:root {
  /* Force light UA rendering (canvas, scrollbars, controls)
     unless dark mode is both allowed by the flag and preferred
     by the OS. */
  color-scheme: light;
  @media (prefers-color-scheme: dark) {
    &[data-allow-darkmode] {
      color-scheme: dark;
      --enable-dark-mode: 1;
    }
  }

  /** tool https://www.gamutmap.com/site/ */
  --c-black-true: #000000;
  --c-black-1a: #1a1a1a;
  --c-black-0f: #0f0f0f;
  --c-blue: #0000ff;
  --c-cyan: cyan;
  --c-magenta-soft: #FF85EF;
  --c-magenta: magenta;
  --c-peace: #ffaaaa;
  --c-pink: #ffd9ff;
  --c-pink-dark: #ff00DD;
  --c-pink-white: #FFD9FF;
  --c-red: #ff0000;
  --c-red-desat: #F13C3C;
  /*
   * Hue: 180
   * RGB: #018080, P3(0.2167 0.494 0.4981), rgb(1,128,128)
   * LCH: oklch(54.32% 0.0926 194.80)
   */
  --c-teal: teal;
  --c-teal-dark: teal;
  --c-white: #ffffff;
  --c-white-fa: #fafafa;
  --c-yellow: #ffff00;

  @supports (color: color(display-p3 1 1 1)) {
    /* 1ax0 = 0.1015625 */
    --c-black-1a: color(display-p3 0.1015625 0.1015625 0.1015625);
    /* fx0 = 0.0625 */
    --c-black-0f: color(display-p3 0.0625 0.0625 0.0625);
    /* I am setting this on principal */
    --c-blue: color(display-p3 0 0 1);
    --c-cyan: color(display-p3 0 1 1);
    --c-red: color(display-p3 1 0 0);
    --c-yellow: color(display-p3 1 1 0);
    --c-white: color(display-p3 1 1 1);
  }

  @supports (color: oklch(0 0 0)) {
    --c-magenta-soft: oklch(78.67% 0.289 332.3);
    --c-peach: oklch(0.82 0.13 19);
    --c-pink-dark: oklch(68.29% 0.388 336.1);
    --c-teal-dark: oklch(54.32% 0.1246 194.80);
    --c-teal: oklch(0.5432 0.20 194.8);
  }

  @supports (color: color(rec2020 1 0 0)) {
    @media (color-gamut: rec2020) {
      --c-blue:    color(rec2020 0 0 1);
      --c-cyan:    color(rec2020 0 1 1);
      --c-magenta: color(rec2020 1 0 1);
      --c-red:     color(rec2020 1 0 0);
      --c-yellow:  color(rec2020 1 1 0);
    }
  }

  --bg-black: #fafafa;
  --bg-black-0f: #e0e0e0;
  --bg-black-2a: #c5c5c5;
  --bg-black-33: #ccc;
  --bg-black-3a: #b5b5b5;
  --bg-black-44: #bbb;
  --bg-white: #ffffff;
  --bg-blue: var(--c-teal);
  --bg-pink: #ffAAFF;
  --bg-red: #ffff00;
  --bg-msgrey: #c6c6c6;
  --bg-ms-button-idle: #c0c0c0;
  --bg-msteal: var(--c-teal);
  --bg-greygreen: #ffAAFF;
  --bg-yellow: yellow;

  --fg-grey-aa: #555;
  --fg-white: var(--c-blue);
  --fg-white-on-red: var(--c-blue);
  --fg-white-on-grey: #fafafa;
  --fg-white-ee: #11a;
  --fg-black-on-pink: var(--c-black-true);
  --fg-peach: var(--c-peach);

  --txt-shadow-blue: 1px 1px #ff66ff;
  --txt-shadow-cyan: 1px 1px var(--c-cyan);
  --txt-shadow-red: 1px 1px #ffff00;

  --border-inset-grey: 3px inset #c6c6c6;
  --border-outset-grey: 3px outset #c6c6c6;
  --border-solid-grey: 1px solid #ccc;
  --border-solid-white: 1px solid var(--c-blue);
  --border-white-dash: var(--c-blue) 1px dashed;
  --border-color-yellow: yellow;
  --border-outset-color-themed: #feffff #6c6c6c #6c6c6c #feffff;
  --border-inset-color-themed: #727272 #feffff #feffff #727272;

  --bg-ms: #e0e0e0;
  --border-outset-ms-color: #feffff #6c6c6c #6c6c6c #feffff;
  --border-inset-ms-color: #727272 #feffff #feffff #727272;

  --filter-ms-button-border:
    drop-shadow(1px 0 0 black)
    drop-shadow(-1px 0 0 black)
    drop-shadow(0 1px 0 black)
    drop-shadow(0 -1px 0 black);

  @media (prefers-color-scheme: dark) {
    &[data-allow-darkmode] {
      --bg-black: var(--c-black-1a);
      --bg-black-0f: var(--c-black-0f);
      --bg-black-2a: #2a2a2a;
      --bg-black-33: #333;
      --bg-black-3a: #3a3a3a;
      --bg-black-44: #444;

      --bg-pink: var(--c-pink-dark);
      --bg-blue: var(--c-blue);
      --bg-red: var(--c-red);
      --bg-greygreen: rgb(112, 121, 110);

      --fg-grey-aa: #aaa;
      --fg-white: #fafafa;
      --fg-white-on-red: #fafafa;
      --fg-white-ee: #eee;

      --txt-shadow-blue: 1px 1px var(--c-blue);
      --txt-shadow-red: 1px 1px var(--c-red);

      --border-solid-grey: 1px solid #333;
      --border-solid-white: var(--c-white) 1px solid;
      --border-white-dash: var(--c-white) 1px dashed;
    }
  }

  --img-scroll-up-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=');
  --img-scroll-down-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=');
  --img-scroll-left-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC');
  --img-scroll-right-arrow: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
  --img-scroll-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
  --img-scroll-bg-active: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==');
  --img-scroll-resizer: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==');

  --boxshadow-ms-borderwell:
    -1px -1px 0 #868a8e,
    -1px 0 0 #868a8e,
    0 -1px 0 0 #868a8e,
    1px 0 0 var(--c-white),
    1px 1px 0 var(--c-white),
    0 1px 0 var(--c-white);

  --boxshadow-ms-outset:
    inset 1px 1px 0 0 var(--c-white),
    inset -1px -1px 0 0 #868a8e;

  --boxshadow-ms-inset:
    inset 1px 1px 0 0 #868a8e,
    1px 1px 0 0 black,
    1px 0 0 0 black,
    0 1px 0 0 black;

  /* TEMP: HamuraMono19 webfont, defined in sheet/fonts/fonts.css */
  --fontfamily-default: HamuraMono19, Menlo, monospace;

  --fontsize-body-s: 9px;
  --fontsize-body-m: 10.8px;
  --fontsize-body-l: 13px;
  --fontsize-math-s: 14px;
  --fontsize-math-m: 16px;
  --fontsize-h1: 26px;
  --fontsize-h2: 19.5px;
  --fontsize-h3: 15.21px;
  --fontsize-h4: 13px;
  --fontsize-h5: 10.79px;
  --fontsize-h6: 9px;
  --fontsize-dt: 13px;
  --fontsize-dd: 10.8px;

  --lineheight-h1: 1.16;
  --lineheight-h2: 1.18;
  --lineheight-h3: 1.19;
  --lineheight-h4: 1.2;
  --lineheight-h5: 1.25;
  --lineheight-h6: 1.2;
  --lineheight-dt: 1.2;

  --hr-margin-block: 6.5px;

  --transition-prop-time: 0.2s;
  --transition-prop-ease: steps(5, end);
  --transition-rule-opacity: opacity var(--transition-prop-time) var(--transition-prop-ease);

  --nested-content-box-shadow: 4px 4px color-mix(in srgb, var(--c-blue) 10%, rgba(255, 255, 255, 0) 90%);
  @media (prefers-color-scheme: dark) {
    &[data-allow-darkmode] {
      --nested-content-box-shadow: 4px 4px color-mix(in srgb, var(--c-white) 10%, rgba(255, 255, 255, 0) 90%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    --transition-prop-time: 0;
  }
}

:root {
  --app-fg: var(--c-blue);
  --app-bg: #e0e0e0;
  --app-block-text-display: block;

  --app-line-height: 1.8;
  --app-bg-uc: var(--c-white-fa);

  --app-fg-nav: var(--c-blue);
  --app-bg-nav-link:var(--c-white-fa);
  --app-fg-nav-link-hover: var(--c-white);
  --app-bg-nav-link-hover: navy;
  --app-bg-nav-summary: #c5c5c5;
  --app-bg-nav-summary-hover: #b5b5b5;

  --app-border-blue-solid: var(--c-blue) solid 2px;

  --app-border-c-outset: #feffff #6c6c6c #6c6c6c #feffff;
  --app-border-c-inset: #727272 #feffff #feffff #727272;

  @media (prefers-color-scheme: dark) {
    &[data-allow-darkmode] {
      --app-fg: var(--c-white-fa);
      --app-bg-uc: #1a1a1a;
      --app-bg-nav-link-hover: var(--c-blue);

      /*
      --app-bg: var(--c-blue);


      --app-fg-nav: var(--c-blue);
      --app-bg-nav-link: #fafafa;
      --app-bg-nav-summary: #c5c5c5;
      --app-bg-nav-summary-hover: #b5b5b5;

      --app-border-c-outset: #acaaff #3c3cff #3c3cff #acaaff;
      --app-border-c-inset: #4242ff #9c9aff #9c9aff #4242ff;
      */
    }
  }

  --ui-dt-bg: var(--c-pink-white);
  --ui-dt-fg: var(--c-blue);
  --ui-dt-bottom-border: var(--c-blue);
  --ui-bg-faint-stripes: repeating-linear-gradient(
      0deg,
      white,
      white 1px,
      rgba(0, 0, 255, 0.05) 1px,
      rgba(0, 0, 255, 0.05) 2px
    );

  @media (prefers-color-scheme: dark) {
    &[data-allow-darkmode] {
      --ui-dt-bg: var(--bg-greygreen);
      --ui-dt-fg: var(--c-white-fa);
      --ui-dt-bottom-border: var(--c-white);
    }
  }
}