/* =============================================================================
Variables
========================================================================== */

body {
   --hue: 206;
   --saturation: 100%;
   --lightness: 50%;
   /* --primary: hsl(206, 100%, 50%); */
}

[color-scheme="mdat"] {
   --hue: 206;
   --saturation: 100%;
   --lightness: 50%;
   /* --primary: hsl(206, 100%, 50%); */
}

[color-scheme="phy"] {
   --hue: 217;
   --saturation: 30%;
   --lightness: 60%;
   /* --primary: hsl(217, 30%, 60%); */
}

[color-scheme="dev"] {
   --hue: 238;
   --saturation: 73%;
   --lightness: 50%;
   /* --primary: hsl(238, 73%, 50%); */
}

[color-scheme="nat"] {
   --hue: 73;
   --saturation: 40%;
   --lightness: 40%;
   /* --primary: hsl(73, 40%, 40%); */
}

[color-scheme="veg"] {
   --hue: 15;
   --saturation: 81%;
   --lightness: 37%;
   /* --primary: hsl(15, 81%, 37%); */
}

[color-scheme="lat"] {
   --hue: 217;
   --saturation: 24%;
   --lightness: 66%;
   /* --primary: hsl(217, 24%, 66%); */
}

[color-scheme="gar"] {
   --hue: 95;
   --saturation: 32%;
   --lightness: 47%;
   /* --primary: hsl(95, 32%, 47%); */
}

[color-scheme="env"] {
   --hue: 45;
   --saturation: 66%;
   --lightness: 40%;
   /* --primary: hsl(45, 66%, 40%); */
}


body, [color-scheme="mdat"], [color-scheme="phy"], [color-scheme="dev"], [color-scheme="nat"], [color-scheme="veg"], [color-scheme="lat"], [color-scheme="gar"], [color-scheme="env"] {
   color-scheme: light;

   /* light */
   --primary-light: hsl(var(--hue) var(--saturation) var(--lightness));
   --text-1-light: hsl(var(--hue) var(--saturation) 10%);
   --text-2-light: hsl(var(--hue) 30% 30%);
   --surface-1-light: hsl(var(--hue) 25% 90%);
   --surface-2-light: hsl(var(--hue) 20% 99%);
   --surface-3-light: hsl(var(--hue) 20% 92%);
   --surface-4-light: hsl(var(--hue) 20% 85%);
   --surface-shadow-light: var(--hue) 10% calc(var(--lightness) / 5);
   --shadow-strength-light: .02;
   
   /* dark */
   --primary-dark: hsl(var(--hue) calc(var(--saturation) / 2) calc(var(--lightness) / 1.5));
   --text-1-dark: hsl(var(--hue) 15% 85%);
   --text-2-dark: hsl(var(--hue) 5% 65%);
   --surface-1-dark: hsl(var(--hue) 10% 10%);
   --surface-2-dark: hsl(var(--hue) 10% 15%);
   --surface-3-dark: hsl(var(--hue) 5% 20%);
   --surface-4-dark: hsl(var(--hue) 5% 25%);
   --surface-shadow-dark: var(--hue) 50% 3%;
   --shadow-strength-dark: .8;

   /* automatic color scheme */
   --primary: var(--primary-light);
   --text-1: var(--text-1-light);
   --text-2: var(--text-2-light);
   --surface-1: var(--surface-1-light);
   --surface-2: var(--surface-2-light);
   --surface-3: var(--surface-3-light);
   --surface-4: var(--surface-4-light);
   --surface-shadow: var(--surface-shadow-light);
   --shadow-strength: var(--shadow-strength-light);

   --shadow-1: 0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03));
   --shadow-2:
      0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
      0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
      0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
      0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
      0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
      0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength));
}

@media (prefers-color-scheme: dark) {
   body, [color-scheme="mdat"], [color-scheme="phy"], [color-scheme="dev"], [color-scheme="nat"], [color-scheme="veg"], [color-scheme="lat"], [color-scheme="gar"], [color-scheme="env"] {
      color-scheme: dark;

      --primary: var(--primary-dark);
      --text-1: var(--text-1-dark);
      --text-2: var(--text-2-dark);
      --surface-1: var(--surface-1-dark);
      --surface-2: var(--surface-2-dark);
      --surface-3: var(--surface-3-dark);
      --surface-4: var(--surface-4-dark);
      --surface-shadow: var(--surface-shadow-dark);
      --shadow-strength: var(--shadow-strength-dark);
   }
}


/* =============================================================================
   Base styles
   ========================================================================== */
*,
*:before,
*:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

html {
   color-scheme: light dark;
   font-size: 18px;
   line-height: 1.6;
}
body {
   background: var(--surface-1);
   color: var(--text-1);
}

/* Links
   ========================================================================== */

a {
   text-decoration: none;
   color: var(--primary);
   transition: background 0.3s ease-in-out;
}

a:hover {
   background-color: var(--surface-2);
}

a:has(img):hover {
   filter: none;
}

a:active {
   filter: brightness(50%);
}

a[href=""] {
   cursor: not-allowed;
}

/* Images & Video
   ========================================================================== */

img,
video {
   max-width: 100%;
   height: auto;
}

/* Typography
   ========================================================================== */

article {
   padding-block: 0.83em;
}

h1,
h2,
h3,
h4 {
   position: relative;
   line-height: 1.2;

   /* Long headlines that are 1 word
      https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
   overflow-wrap: break-word;
   word-wrap: break-word;
   -ms-word-break: break-all;
}
h1:before,
h2:before,
h3:before,
h4:before {
   position: absolute;
   right: calc(100% + var(--s-8));
   opacity: 0.25;
   font-weight: 400;
   display: none;
}

h1 {
   font-size: 1.5rem;
   font-weight: 700;
   margin-block: 0.83em;
}
h1::before {
   content: "h1";
}

h2 {
   font-size: 1.333rem;
   font-weight: 700;
}
h2::before {
   content: "h2";
}

h3 {
   font-size: 1.15rem;
   font-weight: 700;
}
h3::before {
   content: "h3";
}

h4 {
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 0.01rem;
   font-weight: 500;
}
h4::before {
   content: "h4";
}

/* Misc. Elements
   ========================================================================== */

blockquote {
   padding-left: 1rem;
   margin-left: 0;
   font-style: italic;
   border-left: 2px solid var(--c-bg-opaque);
}

blockquote em,
blockquote code {
   font-style: normal;
}

pre {
   font-size: 0.88888rem;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background: var(--c-bg-opaque);
}

hr {
   border: 0;
   border-bottom: 1px solid;
   margin: var(--s-32) 0;
   opacity: 0.125;
}

/* Tables
   ========================================================================== */

table {
   max-width: none;
   display: block;
   overflow: auto;
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
   font-size: 0.88888888em;
}

table th {
   text-align: left;
}

table thead {
   /* border-top: 1px solid; */
   /* border-bottom: 1px solid; */
}
table tbody {
   /* border-bottom: 1px solid; */
}

table tbody tr:nth-child(2n + 1) {
   background-color: var(--c-fg);
}

table th,
table td {
   padding: 0.325em 1em;
}
    
html {
   color-scheme: light dark;
}

body {
   font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
   Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
   "Segoe UI Symbol";
   min-height: 100dvh;
   padding: 0;
   margin: 0;
   font-size: 1.125rem; /* 18px */
   line-height: 1.5;
}

header {
   max-width: 60ch;
   margin: 0 auto;
   padding: 0 1.5rem;
}

footer {
   display: flex;
   justify-content: center;
   column-gap: 1em;
   margin: 1em 0;
}

svg,
img {
   max-width: 100%;
   height: auto;
}

pre code {
   white-space: pre-wrap;
}