/* Every colour, size and space the app draws with. Nothing else names one:
 * app.css only reads these, and styles_test.mjs refuses a literal. */

:root,
.pm-reader[data-chrome='light'] {
  color-scheme: light;

  --bg: #F4F1EA;
  --card: #FBF9F4;
  --tint: #EFEADF;
  --ink: #1A1814;
  --text: #2E2A25;
  --sub: #4A453E;
  --muted: #6B655B;
  --rule: #D9D2C4;
  --rule2: #E2DACB;
  --dot: #B8AE9C;
  --dash: #C2B9A8;
  --accent: #B83A22;
  --ok: #2F6B4F;
  --onaccent: #FBF9F4;
  --edge: rgba(26, 24, 20, .14);
  --sel: rgba(31, 53, 87, .22);

  --hl-yellow: rgba(230, 180, 40, .38);
  --hl-green: rgba(80, 160, 100, .30);
  --hl-blue: rgba(70, 130, 210, .28);
  --hl-pink: rgba(210, 90, 130, .28);

  --font-ui: Archivo, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-serif: 'Source Serif 4', Georgia, serif;

  /* Named by tenths of a pixel at the root size. */
  --fs-105: 10.5px;
  --fs-110: 11px;
  --fs-115: 11.5px;
  --fs-120: 12px;
  --fs-125: 12.5px;
  --fs-130: 13px;
  --fs-135: 13.5px;
  --fs-140: 14px;
  --fs-145: 14.5px;
  --fs-150: 15px;
  --fs-160: 16px;
  --fs-180: 18px;
  --fs-200: 20px;
  --fs-220: 22px;
  --fs-240: 24px;
  --fs-260: 26px;
  --fs-300: 30px;
  --fs-340: 34px;
  --fs-400: 40px;
  --fs-440: 44px;
  --fs-640: 64px;

  --sp-n10: -10px;
  --sp-n20: -20px;
  --sp-n32: -32px;
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-54: 54px;
  --sp-72: 72px;

  --radius: 4px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* The reading themes. Paper and White are Light chrome, Black is Dark: inside
 * the reader the chrome follows the page, not the app. The page's colours are
 * their own block: the chrome palettes name the reader element too, and a token
 * they declared there would beat the theme chosen on it. */
:root { --page: #F4F1EA; --pagetext: #2A2622; --slot: #6B655B; }
[data-reading='paper'] { --page: #F4F1EA; --pagetext: #2A2622; --slot: #6B655B; }
[data-reading='white'] { --page: #FFFFFF; --pagetext: #1A1814; --slot: #6B655B; }
[data-reading='black'] { --page: #000000; --pagetext: #CFC8BC; --slot: #8C8579; }

/* System is the default and follows the device live; an explicit choice is
 * stamped on the root and wins in both directions. */
:root[data-theme='dark'],
.pm-reader[data-chrome='dark'] {
  color-scheme: dark;
  --bg: #000000;
  --card: #0F0E0D;
  --tint: #1A1917;
  --ink: #EDE8DF;
  --text: #D8D2C7;
  --sub: #B5AEA2;
  --muted: #9C9588;
  --rule: #2A2825;
  --rule2: #1C1B19;
  --dot: #4E4942;
  --dash: #4A463F;
  --accent: #EB6F52;
  --ok: #7DBE98;
  --onaccent: #FFF8F2;
  --edge: rgba(255, 255, 255, .14);
  --sel: rgba(143, 179, 224, .32);
  --hl-yellow: rgba(230, 180, 40, .34);
  --hl-green: rgba(110, 190, 130, .30);
  --hl-blue: rgba(110, 160, 230, .32);
  --hl-pink: rgba(230, 110, 150, .32);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #000000;
    --card: #0F0E0D;
    --tint: #1A1917;
    --ink: #EDE8DF;
    --text: #D8D2C7;
    --sub: #B5AEA2;
    --muted: #9C9588;
    --rule: #2A2825;
    --rule2: #1C1B19;
    --dot: #4E4942;
    --dash: #4A463F;
    --accent: #EB6F52;
    --ok: #7DBE98;
    --onaccent: #FFF8F2;
    --edge: rgba(255, 255, 255, .14);
    --sel: rgba(143, 179, 224, .32);
    --hl-yellow: rgba(230, 180, 40, .34);
    --hl-green: rgba(110, 190, 130, .30);
    --hl-blue: rgba(110, 160, 230, .32);
    --hl-pink: rgba(230, 110, 150, .32);
  }
}