@import url('./reset.css');

:root {
  --flexoki-black: #100f0f;
  --flexoki-paper: #fffcf0;

  --flexoki-50: #f2f0e5;
  --flexoki-100: #e6e4d9;
  --flexoki-150: #dad8ce;
  --flexoki-200: #cecdc3;
  --flexoki-300: #b7b5ac;
  --flexoki-400: #9f9d96;
  --flexoki-500: #878580;
  --flexoki-600: #6f6e69;
  --flexoki-700: #575653;
  --flexoki-800: #403e3c;
  --flexoki-850: #343331;
  --flexoki-900: #282726;
  --flexoki-950: #1c1b1a;

  --flexoki-red-50: #ffe1d5;
  --flexoki-red-100: #ffcabb;
  --flexoki-red-150: #fdb2a2;
  --flexoki-red-200: #f89a8a;
  --flexoki-red-300: #e8705f;
  --flexoki-red-400: #d14d41;
  --flexoki-red-500: #c03e35;
  --flexoki-red-600: #af3029;
  --flexoki-red-700: #942822;
  --flexoki-red-800: #6c201c;
  --flexoki-red-850: #551b18;
  --flexoki-red-900: #3e1715;
  --flexoki-red-950: #261312;

  --flexoki-orange-50: #ffe7ce;
  --flexoki-orange-100: #fed3af;
  --flexoki-orange-150: #fcc192;
  --flexoki-orange-200: #f9ae77;
  --flexoki-orange-300: #ec8b49;
  --flexoki-orange-400: #da702c;
  --flexoki-orange-500: #cb6120;
  --flexoki-orange-600: #bc5215;
  --flexoki-orange-700: #9d4310;
  --flexoki-orange-800: #71320d;
  --flexoki-orange-850: #59290d;
  --flexoki-orange-900: #40200d;
  --flexoki-orange-950: #27180e;

  --flexoki-yellow-50: #faeec6;
  --flexoki-yellow-100: #f6e2a0;
  --flexoki-yellow-150: #f1d67e;
  --flexoki-yellow-200: #eccb60;
  --flexoki-yellow-300: #dfb431;
  --flexoki-yellow-400: #d0a215;
  --flexoki-yellow-500: #be9207;
  --flexoki-yellow-600: #ad8301;
  --flexoki-yellow-700: #8e6b01;
  --flexoki-yellow-800: #664d01;
  --flexoki-yellow-850: #503d02;
  --flexoki-yellow-900: #3a2d04;
  --flexoki-yellow-950: #241e08;

  --flexoki-green-50: #edeecf;
  --flexoki-green-100: #dde2b2;
  --flexoki-green-150: #cdd597;
  --flexoki-green-200: #bec97e;
  --flexoki-green-300: #a0af54;
  --flexoki-green-400: #879a39;
  --flexoki-green-500: #768d21;
  --flexoki-green-600: #66800b;
  --flexoki-green-700: #536907;
  --flexoki-green-800: #3d4c07;
  --flexoki-green-850: #313d07;
  --flexoki-green-900: #252d09;
  --flexoki-green-950: #1a1e0c;

  --flexoki-cyan-50: #ddf1e4;
  --flexoki-cyan-100: #bfe8d9;
  --flexoki-cyan-150: #a2dece;
  --flexoki-cyan-200: #87d3c3;
  --flexoki-cyan-300: #5abdac;
  --flexoki-cyan-400: #3aa99f;
  --flexoki-cyan-500: #2f968d;
  --flexoki-cyan-600: #24837b;
  --flexoki-cyan-700: #1c6c66;
  --flexoki-cyan-800: #164f4a;
  --flexoki-cyan-850: #143f3c;
  --flexoki-cyan-900: #122f2c;
  --flexoki-cyan-950: #101f1d;

  --flexoki-blue-50: #e1eceb;
  --flexoki-blue-100: #c6dde8;
  --flexoki-blue-150: #abcfe2;
  --flexoki-blue-200: #92bfdb;
  --flexoki-blue-300: #66a0c8;
  --flexoki-blue-400: #4385be;
  --flexoki-blue-500: #3171b2;
  --flexoki-blue-600: #205ea6;
  --flexoki-blue-700: #1a4f8c;
  --flexoki-blue-800: #163b66;
  --flexoki-blue-850: #133051;
  --flexoki-blue-900: #12253b;
  --flexoki-blue-950: #101a24;

  --flexoki-purple-50: #f0eaec;
  --flexoki-purple-100: #e2d9e9;
  --flexoki-purple-150: #d3cae6;
  --flexoki-purple-200: #c4b9e0;
  --flexoki-purple-300: #a699d0;
  --flexoki-purple-400: #8b7ec8;
  --flexoki-purple-500: #735eb5;
  --flexoki-purple-600: #5e409d;
  --flexoki-purple-700: #4f3685;
  --flexoki-purple-800: #3c2a62;
  --flexoki-purple-850: #31234e;
  --flexoki-purple-900: #261c39;
  --flexoki-purple-950: #1a1623;

  --flexoki-magenta-50: #fee4e5;
  --flexoki-magenta-100: #fccfda;
  --flexoki-magenta-150: #f9b9cf;
  --flexoki-magenta-200: #f4a4c2;
  --flexoki-magenta-300: #e47da8;
  --flexoki-magenta-400: #ce5d97;
  --flexoki-magenta-500: #b74583;
  --flexoki-magenta-600: #a02f6f;
  --flexoki-magenta-700: #87285e;
  --flexoki-magenta-800: #641f46;
  --flexoki-magenta-850: #4f1b39;
  --flexoki-magenta-900: #39172b;
  --flexoki-magenta-950: #24131d;
}

:root,
.theme-light {
  --color-bg-primary: var(--flexoki-paper);
  --color-bg-primary-rgb: var(--flexoki-paper-rgb);
  --color-inverted-rgb: var(--flexoki-black-rgb);
  --color-bg-secondary: var(--flexoki-50);
  --color-tx-normal: var(--flexoki-black);
  --color-tx-normal-rgb: var(--flexoki-black-rgb);
  --color-tx-muted: var(--flexoki-600);
  --color-tx-faint: var(--flexoki-300);
  --color-ui-normal: var(--flexoki-100);
  --color-ui-hover: var(--flexoki-150);
  --color-ui-active: var(--flexoki-200);
  --color-highlight: var(--flexoki-yellow-100);
  --color-action: var(--flexoki-cyan-600);
  --color-bg-hover: var(--flexoki-cyan-50);
  --color-selection: rgba(187, 220, 206, 0.3);
  --color-re: var(--flexoki-red-600);
  --color-re-hover: var(--flexoki-red-400);
  --color-or: var(--flexoki-orange-600);
  --color-or-hover: var(--flexoki-orange-400);
  --color-ye: var(--flexoki-yellow-600);
  --color-ye-hover: var(--flexoki-yellow-400);
  --color-gr: var(--flexoki-green-600);
  --color-gr-hover: var(--flexoki-green-400);
  --color-cy: var(--flexoki-cyan-600);
  --color-cy-hover: var(--flexoki-cyan-400);
  --color-bl: var(--flexoki-blue-600);
  --color-bl-hover: var(--flexoki-blue-400);
  --color-pu: var(--flexoki-purple-600);
  --color-pu-hover: var(--flexoki-purple-400);
  --color-ma: var(--flexoki-magenta-600);
  --color-ma-hover: var(--flexoki-magenta-400);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: var(--flexoki-black);
    --color-bg-primary-rgb: var(--flexoki-black-rgb);
    --color-inverted-rgb: var(--flexoki-paper-rgb);
    --color-bg-secondary: var(--flexoki-950);
    --color-tx-normal: var(--flexoki-200);
    --color-tx-normal-rgb: var(--flexoki-200-rgb);
    --color-tx-muted: var(--flexoki-500);
    --color-tx-faint: var(--flexoki-700);
    --color-ui-normal: var(--flexoki-900);
    --color-ui-hover: var(--flexoki-850);
    --color-ui-active: var(--flexoki-800);
    --color-highlight: var(--flexoki-yellow-900);
    --color-action: var(--flexoki-cyan-400);
    --color-bg-hover: var(--flexoki-cyan-950);
    --color-selection: rgba(30, 95, 91, 0.3);
    --color-re: var(--flexoki-red-400);
    --color-re-hover: var(--flexoki-red-600);
    --color-or: var(--flexoki-orange-400);
    --color-or-hover: var(--flexoki-orange-600);
    --color-ye: var(--flexoki-yellow-400);
    --color-ye-hover: var(--flexoki-yellow-600);
    --color-gr: var(--flexoki-green-400);
    --color-gr-hover: var(--flexoki-green-600);
    --color-cy: var(--flexoki-cyan-400);
    --color-cy-hover: var(--flexoki-cyan-600);
    --color-bl: var(--flexoki-blue-400);
    --color-bl-hover: var(--flexoki-blue-600);
    --color-pu: var(--flexoki-purple-400);
    --color-pu-hover: var(--flexoki-purple-600);
    --color-ma: var(--flexoki-magenta-400);
    --color-ma-hover: var(--flexoki-magenta-600);
  }
}

.theme-dark {
  --color-bg-primary: var(--flexoki-black);
  --color-bg-primary-rgb: var(--flexoki-black-rgb);
  --color-inverted-rgb: var(--flexoki-paper-rgb);
  --color-bg-secondary: var(--flexoki-950);
  --color-tx-normal: var(--flexoki-200);
  --color-tx-normal-rgb: var(--flexoki-200-rgb);
  --color-tx-muted: var(--flexoki-500);
  --color-tx-faint: var(--flexoki-700);
  --color-ui-normal: var(--flexoki-900);
  --color-ui-hover: var(--flexoki-850);
  --color-ui-active: var(--flexoki-800);
  --color-highlight: var(--flexoki-yellow-900);
  --color-action: var(--flexoki-cyan-400);
  --color-bg-hover: var(--flexoki-cyan-950);
  --color-selection: rgba(30, 95, 91, 0.3);
  --color-re: var(--flexoki-red-400);
  --color-re-hover: var(--flexoki-red-600);
  --color-or: var(--flexoki-orange-400);
  --color-or-hover: var(--flexoki-orange-600);
  --color-ye: var(--flexoki-yellow-400);
  --color-ye-hover: var(--flexoki-yellow-600);
  --color-gr: var(--flexoki-green-400);
  --color-gr-hover: var(--flexoki-green-600);
  --color-cy: var(--flexoki-cyan-400);
  --color-cy-hover: var(--flexoki-cyan-600);
  --color-bl: var(--flexoki-blue-400);
  --color-bl-hover: var(--flexoki-blue-600);
  --color-pu: var(--flexoki-purple-400);
  --color-pu-hover: var(--flexoki-purple-600);
  --color-ma: var(--flexoki-magenta-400);
  --color-ma-hover: var(--flexoki-magenta-600);
}

:root {
  --font-primary: 'Yrsa', 'Crimson Pro', ui-serif, serif;
}

/* @link https://utopia.fyi/type/calculator?c=360,20,1.2,1240,20,1.25,2,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --step-0: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
  --step-1: clamp(1.5rem, 1.4744rem + 0.1136vw, 1.5625rem);
  --step-2: clamp(1.8rem, 1.7374rem + 0.2784vw, 1.9531rem);
}

body {
  font-family: var(--font-primary);
  font-optical-sizing: auto;
  color: var(--color-tx-normal);
  background-color: var(--color-bg-primary);

  padding: 1rem;
  max-width: 75ch;

  font-size: var(--step-0);
  line-height: 1;
}

:where(a) {
  color: var(--color-tx-normal);

  &:visited {
    color: var(--color-ma);
  }

  &:hover {
    color: var(--color-bl-hover);
    text-decoration: underline;
  }
}

:where(h1) {
  font-size: var(--step-2);
}

:where(h2) {
  font-size: var(--step-1);
}

:where(h2) {
  font-size: var(--step-0);
}

:where(article) {
  --indent: 1rem;

  line-height: 1.5;

  & > * + * {
    margin-block-start: 0.5em;
  }

  & > :is(p) {
    text-indent: var(--indent);
  }

  & > :is(ul) {
    list-style-type: '-';
    padding-inline-start: calc(var(--indent) + 1ch);

    & > :is(li) {
      padding-inline-start: 1ch;
    }
  }
}

:is(hr) {
  border: 0;
  text-align: center;

  &::before {
    content: '⁂';
  }
}

.list {
  list-style-type: '⦿ ';
  padding-inline-start: 1rem;

  &[data-variant='toc'] {
    list-style-type: '';
  }

  & :is(a) {
    text-decoration: none;
  }

  & > :is(li) {
    padding-block: 1rem;
    line-height: 1;

    &:not(:last-of-type) {
      border-block-end: 1px dashed var(--flexoki-300);
    }

    &:has(> a[aria-current='page'])::marker {
      content: '⦿ ';
    }

    & > a[aria-current='page'] {
      font-weight: 700;
    }
  }
}

.nav {
  list-style-type: '';
  padding: 0;
  margin: 0;

  & > :is(li) {
    padding-inline: 0;
  }
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.toc {
  background-color: var(--color-bg-secondary);
  padding: 1rem;
  border-radius: 0.25rem;

  & :is(a) {
    text-decoration: none;
    display: block;
  }
}

.pagination {
  display: flex;
  align-items: center;
}

.ml-auto {
  margin-inline-start: auto;
}

.text-right {
  text-align: right;
}