/* colors */

:root {
  --color-bg-blank: #121f2b;
  --color-bg-off-blank: #000;
  --color-bg-wash-overlay: #202020bd;

  --color-text-on-blank: #fff;
  --color-text-primary-on-blank: #ffba08;
  --color-text-secondary-on-blank: #ffba08;
  --color-text-quaternary-on-blank: #629fd0;
  --color-text-deemphasized-on-blank: #c4cbd4;
  --color-text-on-off-blank: #fff;

  --color-code-primary: #ffba08;
  --color-code-quaternary: #629fd0;
  --color-code-tertiary: #ff7070;
  --color-code-deemphasized: #c4cbd4;

  --color-primary: #1c3144;
  --color-quaternary: #3476ad;
  --color-tertiary: #d00000;
  --color-secondary: #ffba08;

  --color-bg-primary: #1c3144;
  --color-bg-secondary: #ffba08;
  --color-bg-quaternary: #3476ad;
  --color-bg-tertiary: #d00000;

  --color-text-on-primary: #fff;
  --color-text-secondary-on-primary: #ffba08;
  --color-text-on-secondary: #1c3144;
  --color-text-on-quaternary: #fff;
  --color-text-on-tertiary: #fff;

  --gap: clamp(1rem, 3vw, 40px);
  --gap-med: clamp(1.5rem, 4.5vw, 60px);
  --height-site-header: 3rem;

  font-size: 16px;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg-blank: #fff;
    --color-bg-off-blank: #f4f4f4;
    --color-bg-wash-overlay: #ffffffc9;

    --color-text-on-blank: #000;
    --color-text-primary-on-blank: #1c3144;
    --color-text-secondary-on-blank: #e17400;
    --color-text-quaternary-on-blank: #3476ad;
    --color-text-deemphasized-on-blank: #5e6f82;
    --color-text-on-off-blank: #000;

    --color-code-primary: #1c3144;
    --color-code-quaternary: #3476ad;
    --color-code-tertiary: #d00000;
    --color-code-deemphasized: #5e6f82;
  }
}

::selection {
  color: var(--color-text-on-secondary);
  background-color: var(--color-bg-secondary);
}

.theme-light {
  --color-bg-blank: #fff;
  --color-bg-off-blank: #f4f4f4;
  --color-bg-wash-overlay: #ffffffc9;

  --color-text-on-blank: #000;
  --color-text-primary-on-blank: #1c3144;
  --color-text-secondary-on-blank: #e17400;
  --color-text-quaternary-on-blank: #3476ad;
  --color-text-deemphasized-on-blank: #5e6f82;
  --color-text-on-off-blank: #000;

  --color-code-primary: #1c3144;
  --color-code-quaternary: #3476ad;
  --color-code-tertiary: #d00000;
  --color-code-deemphasized: #5e6f82;
}

.theme-dark {
  --color-bg-blank: #121f2b;
  --color-bg-off-blank: #000;
  --color-bg-wash-overlay: #202020bd;

  --color-text-on-blank: #fff;
  --color-text-primary-on-blank: #ffba08;
  --color-text-quaternary-on-blank: #629fd0;
  --color-text-deemphasized-on-blank: #c4cbd4;
  --color-text-on-off-blank: #fff;

  --color-code-primary: #ffba08;
  --color-code-quaternary: #629fd0;
  --color-code-tertiary: #ff7070;
  --color-code-deemphasized: #c4cbd4;
}

/* grid
max | remainder | 10rem | 58rem | 10rem | remainder |
min | 1rem      |  0rem | 10rem |  0rem | 1rem      | 
*/

:root {
  /* prettier-ignore */
  --grid-template:
    [full-start] 
      minmax(var(--gap), calc((100% - 78rem) / 2))
      [extra-wide-start] 
        minmax(0rem, min(10rem, calc((100% - 58rem) / 2)))
        [content-start] 
          minmax(10rem, 58rem) 
        [content-end] 
        minmax(0rem, min(10rem, calc((100% - 58em) / 2)))
      [extra-wide-end] 
      minmax(var(--gap), calc((100% - 78rem) / 2))
    [full-end];

  /* prettier-ignore */
  --header-grid: 
    [full-start] 
      var(--gap)
      [name-start]
        minmax(10rem, 1fr) 
      [name-end theme-start] 
        4rem 
      [theme-end nav-start]
        min-content
      [nav-end]
      var(--gap)
    [full-end];

  --padding-content-start: max(1.5rem, calc((100% - 40rem) / 2));
  --padding-content-end: max(1.5rem, calc((100% - 40rem) / 2));
}

body {
  display: grid;
  grid-template-columns: var(--grid-template);
}

body > main {
  grid-column: full-start / full-end;
}

site-header {
  grid-column: full-start / full-end;
}

/* styles */

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body-primary), serif;
  font-weight: normal;
  background-color: var(--color-bg-blank);
  color: var(--color-text-on-blank);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "kern";
  font-kerning: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

body > footer {
  min-height: 8rem;
  background-color: var(--color-bg-off-blank);
  grid-column: full;
}

body > footer p {
  color: var(--color-text-deemphasized-on-blank);
  font-size: var(--font-footer-size);
  margin-left: var(--gap);
}