/*
* todo
* - accent color
* - selection color
* - mono font
* - light/dark colors
* - bit patterns
* - prettier
* - layers
* - theme switcher
* - embed revision in comments
* - chrome color
*/

@import url(fonts.css);

* {
  box-sizing: border-box;
}

:root {
  --amiga-boing-bg: #b3b3b3; /* grey */
  --amiga-boing-grid: oklch(0.5 0.19 326.81); /* purple */
  --amiga-1000-case-color: #e3d9c6; /* beige */
  --base-sheet: oklch(0.93 0.01 83.3);
  --base-sheet-dark: oklch(from var(--base-sheet) 0.25 c calc(h + 180));
  --color-sheet: light-dark(var(--base-sheet), var(--base-sheet-dark));
  --color-bg: light-dark(#fff, #000);
  --color-border: light-dark(#000, #fff);
  --color-text: light-dark(#141414, #e3e3e3);
  --color-link: light-dark(
    var(--amiga-boing-grid),
    oklch(from var(--amiga-boing-grid) 0.75 0.23 h)
  );
  --font-header: "Berkeley Mono";
  --font-body: "Melior";
  --font-size: calc(12px + 0.2vw); /* TODO: clamp */
}

html {
  color-scheme: light dark;
  background: var(--color-sheet);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  max-width: min(100ch, calc(100vw - 2rem));
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(4px + 1.6vw);
  padding: calc(5px + 1.6vw);
  border: 3px double var(--color-border);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-header);
  background: radial-gradient(
    light-dark(
        color-mix(in oklch, var(--color-sheet), black 20%),
        color-mix(in oklch, var(--color-sheet), white 30%)
      )
      15%,
    transparent 15%
  );
  background-size: 4px 4px;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  span {
    background: var(--color-bg);
  }
}

a {
  color: var(--color-link);
  text-decoration-color: oklch(from currentColor l c h / 50%);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
  &:hover {
    text-decoration-thickness: 0.1em;
  }
}

header {
  h1 {
    margin-block-start: 0;
    letter-spacing: -0.1vw;
  }
}

footer {
  margin-block-start: calc(20px + 1.6vw);
  color: oklch(from currentColor l c h / 50%);
  font-size: 0.9em;
}