/* Sizes */
:root {
   --radius-1: 0.1rem;
   --radius-2: 0.2rem;
   --radius-3: 0.5rem;
   --radius-full: 50%;

   --content: 70ch;
}
/* Transitions and Animations */
:root {

}

/* Fonts */
:root {
   --sans-serif: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
   --serif: ui-serif,serif;
   --mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;
}

/* Color scheme */
:root {
   /* primary foundation */
   --hue: 217;
   --saturation: 24%;
   --lightness: 66%;
   /* --primary: hsl(217, 24%, 66%); */

   /* 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;
}

:root {
   color-scheme: light;

   /* set defaults */
   --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) {
   :root {
      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);
   }
}

*, *::before, *::after {
   box-sizing: border-box;
}

body {
   margin: 0;
   background-color: var(--surface-1);
   font-family: var(--sans-serif);
   font-size: 1.2rem;
   color: var(--text-1);
   transition: color 1s ease, background-color 1s ease;
}

/* article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section */

/* Text and Layout */
h1,
h2,
h3,
h4,
h5,
h6,
p {
   line-height: 1.5;
}

blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* abbr */
abbr {
   text-decoration: none;
   border-bottom: 2px dashed var(--text-2);
}

/* Lists */
ul, ol {
   padding-left: 1em;
}
ol > li,
ul > li {
   line-height: 1.5;
}
ul > li {
   list-style-type: "≻ ";
}
ol > li::marker,
ul > li::marker {
   color: var(--text-2);
}
ol > li::marker {
   font-size: 0.9em;
}

/* dl, dt, dd */

/* details, summary */
details {
   position: relative;
   transition: height 0.5s ease;
   margin: 1em 0;
}
details summary::marker { content: ""; }
details summary::-webkit-details-marker { display: none; }
details summary {
   cursor: pointer;
   padding: 0.5em 1em 0.5em 1em;
}
details::after {
   content: "";
   position: absolute;
   top: 0.6em;
   right: 0.5em;
   display: block;
   width: 0.7em;
   height: 0.7em;
   border: 1px solid var(--text-1);
   border-bottom-right-radius: var(--radius-1);
   border-top: none;
   border-left: none;
   transform-origin: 66.67% 66.67%;
   transform: translate(-100%, 0%) rotate(45deg);
   transition: transform 0.25s ease;
   pointer-events: none;
}
details[open]::after {
   transform: translate(-100%, 0%) rotate(225deg);
}
details .content {
   padding: 0.5em 1em 1em 1em;
}

/* dialog */
dialog {
   border: none;
   background-color: var(--surface-2);
   color: var(--text-1);
   padding: 0.5em 1em;
   border-radius: var(--radius-2);
   transition: backdrop-filter 0.2s ease;
}
dialog::backdrop {
   background-color: var(--surface-4);
   opacity: 1;
   backdrop-filter: blur(3px);
}

/* Table */
table {
   border-collapse: collapse;
   border-spacing: 0;
}
/* table, caption, tbody, tfoot, thead, tr, th, td */

/* pre, code */

/* Links */
a {
   position: relative;
   color: var(--primary);
   text-decoration: none;
   font-weight: bold;
   outline-color: var(--primary);
   transition: color 0.2s ease;
}
a::after {
   content: "";
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0%;
   height: 2px;
   background-color: var(--text-2);
   border-radius: 1px;
   transition: width 0.2s ease;
}
@media (hover: hover) {
   a:hover::after {
      width: 100%;
   }
   a:hover {
      color: var(--text-1);
      position: relative;
      z-index: 1; 
   }
}
a:not(:active):focus-visible { position: relative; z-index: 1; outline-offset: 0.5em; }
@media (prefers-reduced-motion: no-preference) {
   button:focus-visible { transition: outline-offset 75ms ease-out; }
   button:not(:active):focus-visible { transition-duration: 250ms; }
}

/* Buttons */
button {   
   font-family: var(--sans-serif);
   font-size: 1em;
   font-weight: 600;
   line-height: 1.5;
   padding: 0.5em 1em;
   border: none;
   background: var(--surface-2);
   color: var(--text-1);
   border-radius: var(--radius-1);
   outline-color: var(--surface-3);

   display: inline-flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 1ch;
   
   -webkit-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   touch-action: manipulation;
   cursor: pointer;
}
.button {
   border-radius: var(--radius-2);

   --highlight-size: 0;
   box-shadow: 0 3px 5px -2px hsl(var(--surface-shadow) / 4%),
               0 7px 14px -5px hsl(var(--surface-shadow) / 6%),
               0 1px var(--surface-4),
               0 0 0 var(--highlight-size) var(--surface-4);
   text-shadow: 0 1px 0 var(--surface-2);
}
.button:disabled {
   background-color: var(--surface-4);
   color: var(--text-2);
   cursor: not-allowed;
}
button:not(:active):focus-visible { position: relative; z-index: 1; outline-offset: 0.5em; }
@media (hover: hover) {
   .button:not(:active, :disabled):hover { position: relative; z-index: 1; --highlight-size: 0.5em; }
}
@media (prefers-reduced-motion: no-preference) {
   .button { transition: box-shadow 0.2s ease, outline-offset 0.2s ease; }
   button:focus-visible { transition: outline-offset 75ms ease-out; }
   button:not(:active):focus-visible { transition-duration: 250ms; }
}

/* figure, figcaption */
figure {
   margin: 1em 1em;
}
figcaption {
   margin: 0.5em 0;
}
figure > image, figure > svg, figure > canvas, figure > video {
   display: block;
}
/* img, audio, video, canvas, svg, iframe, object, embed */

/* form, fieldset, label, legend */
input {
   accent-color: var(--primary);
}
input[type=text] {
   font-family: var(--sans-serif);
   font-size: 1em;
   border: 0;
   background-color: var(--surface-2);
   border-radius: var(--radius-2);
   padding: 0.5em 1em;
   outline-color: var(--primary);
   outline-offset: var(--radius-3);
}
input:focus-visible { outline-offset: var(--radius-3); }