/* https://www.joshwcomeau.com/css/custom-css-reset/ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}


/* our stuff */
:root {
  /* auto light/dark based on user choice */
  color-scheme: light dark;
}

.drop-shadow {
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.75rem 2.5rem 0 rgba(0, 0, 0, 0.19);
}

/* Dead Orbit */
html:has(option[value="drifting"]:checked) {
  --color-background: light-dark(oklch(0.95 0 0), oklch(0.45 0 0));
  --color-header-footer: light-dark(oklch(0.68 0 0), oklch(0.25 0 0));
  --color-main: light-dark(oklch(0.98 0 0), oklch(0.175 0 0));
  --color-text: light-dark(oklch(0.2 0 0), oklch(0.9 0 0));
}

/* Future War Cult */
html:has(option[value="ascendant"]:checked) {
  --color-background: light-dark(oklch(0.4088 0.1303 281.27), oklch(0.1847 0.0503 286.27));
  --color-header-footer: light-dark(oklch(0.98 0 0), oklch(0.7314 0.0725 91.4));
  --color-main: light-dark(oklch(0.895 0.0916 88.17), oklch(0.3589 0.1438 281.27));
  --color-text: light-dark(oklch(0.4274 0.1456 21.51), oklch(0.98 0 0));
}

/* New Monarchy */
html:has(option[value="aristocratic"]:checked) {
  --color-background: light-dark(oklch(0.98 0 0), oklch(0.2665 0.0841 29.27));
  --color-header-footer: light-dark(oklch(0.4531 0.1712 29.27), oklch(0.3 0 0));
  --color-main: light-dark(oklch(0.9 0 0), oklch(0.2299 0.05 29.27));
  --color-text: light-dark(oklch(0.3 0 0), oklch(0.9 0 0));
}


/* https://smolweb.org/subset.html */
/* structural */
body {
  background: var(--color-background);

  margin: 0 auto;
  max-width: max(768px, 80ch);

  .drop-shadow {
    display: flex;
    flex-direction: column;
    min-height: 100lvh;
  }
}

html {
  font-family: "SF Pro Display",
    -apple-system,
    system-ui,
    BlinkMacSystemFont,
    "Inter",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  /* respect user font size */
  font-size: 100%;
  font-weight: 400;
  color: var(--color-text);
}


/* semantic */
header {
  background: var(--color-header-footer);

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  hr {
    flex: 0 0 100%;
  }

  strong {
    margin: 0 auto 0 0.5rem;
    font-size: 1.6rem;
  }

  label {
    margin: 0.5rem 0.5rem 0;
    font-size: 0.8rem;
  }

  nav {
    margin: 0.5rem;
  }
}

footer {
  background: var(--color-header-footer);
  font-size: 0.8rem;

  p {
    margin: 0.5rem;
  }
}

main {
  background: var(--color-main);

  padding: 1rem;

  flex: 1;
}


/* textual */
h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.2rem;
}

p {
  margin: 1rem 0;
}

/* hypertextual */
/* listing */
/* forms */
/* basic table */
/* image */
/* presentation */
/* metainformation and linking */