rank-king/public/main.css

html {
  max-width: 70ch;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

/*
 *  OKLCH Colors
 *
 *    - https://web.dev/building-a-color-scheme/
 *    - https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
 *    - https://oklch.com/
 */

:root {
  /* https://coolors.co/palette/000814-001d3d-003566-ffc300-ffd60a */

  --background-lightness: 23%;
  --background-chroma: 0.07;
  --background-hue: 252;

  --text-lightness: 33%;
  --text-chroma: 0.10;
  --text-hue: 252;

  --accent-lightness: 85%;
  --accent-chroma: 0.17;
  --accent-hue: 86;
  --accent: oklch(var(--accent-lightness) var(--accent-chroma) var(--accent-hue));

  --background:   oklch(90% 0.10 var(--background-hue));
  --text:         oklch(10% var(--text-chroma) var(--text-hue));

  --text1: oklch(10% var(--text-chroma) var(--text-hue));
  --text2: oklch(35% calc(0.5 * var(--text-chroma)) var(--text-hue));
  /* --selection:    oklch(90% 0.17 var(--accent-hue)); */

  --a-background: oklch(10% 0.05 var(--background-hue));
}

::selection {
  background: var(--selection);
}

body {
  background-color: var(--background);
  color: var(--text);
}

/* a, a:active, a:visited { */
/*   color: var(--selection); */
/*   background-color: var(--a-background); */
/* } */

.surface-samples {
  display: grid;
  --size: 20ch;
  grid-template-columns: var(--size) var(--size);
  grid-auto-rows: var(--size);
  gap: 2ch;

  @media (width <= 480px) { & {
    --size: 40vw;
  }}

  & > * {
    border-radius: 1rem;
    display: grid;
    place-content: center;
    font-size: 3rem;
    font-weight: 200;
  }
}

.text-samples {
  display: grid;
  gap: 1.5ch;

  & > h1 {
    font-size: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: 1ch;
  }
}

.accent {
  color: var(--accent);
  background-color: var(--accent);
}

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}

.text1 {
  color: var(--text1);
  @nest p& {
    font-weight: 200;
  }
}

.text2 {
  color: var(--text2);
}

.swatch {
  display: inline-block;
  flex-shrink: 0;
  inline-size: 1.5ch;
  block-size: 1.5ch;
  border-radius: 50%;

  &.text1 { background-color: var(--text1); }
  &.text2 { background-color: var(--text2); }
}

/*
 * HSL Colors
 *
 *   - https://xeiaso.net/blog/xess-css-variables
 *   - https://web.dev/building-a-color-scheme/
 */

/*
:root {
  --background-color: 43;
  --text-color: 200;
  --accent-color: 32;

  --selection: hsl(var(--accent-color), 80%, 30%, 100%);
  --selection-light: hsl(var(--accent-color), 50%, 80%, 100%);
  --background: hsl(var(--background-color), 100%, 10%, 100%);
  --background-light: hsl(var(--background-color), 10%, 95%, 100%);
  --text: hsl(var(--text-color), 0%, 90%, 100%);
  --text-light: hsl(var(--text-color), 90%, 5%, 100%);
  --pre-background: hsl(var(--background-color), 90%, 5%, 100%);
  --pre-background-light: hsl(var(--background-color), 10%, 80%, 100%);
  --a-background: hsl(var(--background-color), 90%, 5%, 100%);
  --a-background-light: hsl(var(--background-color), 30%, 90%, 100%);
  --a-color: hsl(var(--accent-color), 70%, 85%, 100%);
  --a-color-light: hsl(var(--accent-color), 80%, 10%, 100%);
  --blockquote-border: 0.5ch solid hsl(var(--accent-color), 80%, 80%, 100%);
  --blockquote-border-light: 0.5ch solid hsl(var(--accent-color), 50%, 30%, 100%);
}

::selection {
  background: var(--selection);
}

body {
  background: var(--background);
  color:      var(--text);
}

pre {
  background-color: var(--pre-background);
}

a, a:active, a:visited {
  color: var(--selection);
  background-color: var(--a-background);
}

blockquote {
  border-left: var(--blockquote-border);
}

@media (prefers-color-scheme: light) {
    ::selection {
        background: var(--selection-light);
    }

    body {
        background: var(--background-light);
        color:      var(--text-light);
    }

    pre {
        background-color: var(--pre-background-light);
    }

    a, a:active, a:visited {
        color: var(--a-color-light);
        background-color: var(--a-background-light);
    }

    blockquote {
        border-left: var(--blockquote-border-light);
    }
}
*/