:root {
  /** 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: 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-white: #ffffff;
  --bg-blue: var(--c-blue);
  --bg-pink: var(--c-pink-dark);
  --bg-red: var(--c-red);
  --bg-msgrey: #c6c6c6;
  --bg-ms-button-idle: #c0c0c0;
  --bg-msteal: var(--c-teal);
  --bg-greygreen: rgb(112, 121, 110);
  --bg-yellow: yellow;

  --fg-grey-aa: #aaa;
  --fg-white: #fafafa;
  --fg-white-on-red: #fafafa;
  --fg-white-on-grey: #fafafa;
  --fg-white-ee: #eee;
  --fg-black-on-pink: var(--c-black-true);
  --fg-peach: var(--c-peach);

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

  --border-inset-grey: 3px inset #c6c6c6;
  --border-outset-grey: 3px outset #c6c6c6;
  --border-solid-grey: 1px solid #333;
  --border-solid-white: var(--c-white) 1px solid;
  --border-white-dash: var(--c-white) 1px dashed;
  --border-color-yellow: yellow;

  --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: light) {
    --bg-black: #fafafa;
    --bg-black-0f: #e0e0e0;
    --bg-black-2a: #c5c5c5;
    --bg-black-33: #ccc;
    --bg-black-3a: #b5b5b5;
    --bg-black-44: #bbb;

    --bg-pink: #ffAAFF;
    --bg-blue: var(--c-teal);
    --bg-red: #ffff00;
    --bg-greygreen: #ffAAFF;

    --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;

    --txt-shadow-blue: 1px 1px #ff66ff;
    --txt-shadow-red: 1px 1px #ffff00;

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

  --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;

  --fontfamily-default: 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) {
    --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) {
    --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) {
    --ui-dt-bg: var(--bg-greygreen);
    --ui-dt-fg: var(--c-white-fa);
    --ui-dt-bottom-border: var(--c-white);
  }
}