:root {
  --paper-text: #2d3a4a;
  --paper-glow-1: #fbf5ea;
  --paper-glow-2: rgba(255, 255, 255, 0.25);
  --paper-base-1: #f2e6d3;
  --paper-base-2: #e7d7bd;
  --paper-fiber-1: rgba(0, 0, 0, 0.035);
  --paper-fiber-2: rgba(0, 0, 0, 0.025);
  --paper-fiber-opacity: 0.12;
  --paper-speck-opacity: 0.08;
  --paper-specks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><rect width='120' height='120' fill='none'/><circle cx='12' cy='18' r='1' fill='%23000'/><circle cx='44' cy='26' r='1' fill='%23000'/><circle cx='78' cy='14' r='1' fill='%23000'/><circle cx='96' cy='38' r='1' fill='%23000'/><circle cx='20' cy='52' r='1' fill='%23000'/><circle cx='62' cy='58' r='1' fill='%23000'/><circle cx='104' cy='64' r='1' fill='%23000'/><circle cx='32' cy='74' r='1' fill='%23000'/><circle cx='70' cy='86' r='1' fill='%23000'/><circle cx='14' cy='98' r='1' fill='%23000'/><circle cx='52' cy='104' r='1' fill='%23000'/><circle cx='92' cy='108' r='1' fill='%23000'/></svg>");
}

html[data-paper="classic"] {
  --paper-text: #2d3a4a;
  --paper-glow-1: #fbf5ea;
  --paper-glow-2: rgba(255, 255, 255, 0.25);
  --paper-base-1: #f2e6d3;
  --paper-base-2: #e7d7bd;
  --paper-fiber-1: rgba(0, 0, 0, 0.035);
  --paper-fiber-2: rgba(0, 0, 0, 0.025);
  --paper-fiber-opacity: 0.12;
  --paper-speck-opacity: 0.08;
  --paper-specks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><rect width='120' height='120' fill='none'/><circle cx='12' cy='18' r='1' fill='%23000'/><circle cx='44' cy='26' r='1' fill='%23000'/><circle cx='78' cy='14' r='1' fill='%23000'/><circle cx='96' cy='38' r='1' fill='%23000'/><circle cx='20' cy='52' r='1' fill='%23000'/><circle cx='62' cy='58' r='1' fill='%23000'/><circle cx='104' cy='64' r='1' fill='%23000'/><circle cx='32' cy='74' r='1' fill='%23000'/><circle cx='70' cy='86' r='1' fill='%23000'/><circle cx='14' cy='98' r='1' fill='%23000'/><circle cx='52' cy='104' r='1' fill='%23000'/><circle cx='92' cy='108' r='1' fill='%23000'/></svg>");
}

html[data-paper="linen"] {
  --paper-text: #2b3b45;
  --paper-glow-1: #f4f7f2;
  --paper-glow-2: rgba(255, 255, 255, 0.35);
  --paper-base-1: #e9eee7;
  --paper-base-2: #dfe6dc;
  --paper-fiber-1: rgba(20, 40, 35, 0.04);
  --paper-fiber-2: rgba(20, 40, 35, 0.025);
  --paper-fiber-opacity: 0.12;
  --paper-speck-opacity: 0.06;
  --paper-specks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><rect width='120' height='120' fill='none'/><circle cx='14' cy='20' r='1' fill='%23233'/><circle cx='48' cy='28' r='1' fill='%23233'/><circle cx='84' cy='18' r='1' fill='%23233'/><circle cx='100' cy='42' r='1' fill='%23233'/><circle cx='22' cy='54' r='1' fill='%23233'/><circle cx='64' cy='60' r='1' fill='%23233'/><circle cx='108' cy='66' r='1' fill='%23233'/><circle cx='30' cy='76' r='1' fill='%23233'/><circle cx='74' cy='88' r='1' fill='%23233'/><circle cx='18' cy='100' r='1' fill='%23233'/><circle cx='56' cy='106' r='1' fill='%23233'/><circle cx='94' cy='110' r='1' fill='%23233'/></svg>");
}

html[data-paper="parchment"] {
  --paper-text: #3a2f26;
  --paper-glow-1: #f7ead7;
  --paper-glow-2: rgba(255, 244, 219, 0.28);
  --paper-base-1: #e9d2b6;
  --paper-base-2: #d7b88e;
  --paper-fiber-1: rgba(60, 30, 10, 0.045);
  --paper-fiber-2: rgba(60, 30, 10, 0.03);
  --paper-fiber-opacity: 0.14;
  --paper-speck-opacity: 0.1;
  --paper-specks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><rect width='120' height='120' fill='none'/><circle cx='10' cy='16' r='1' fill='%23321'/><circle cx='40' cy='24' r='1' fill='%23321'/><circle cx='76' cy='12' r='1' fill='%23321'/><circle cx='96' cy='36' r='1' fill='%23321'/><circle cx='18' cy='48' r='1' fill='%23321'/><circle cx='58' cy='56' r='1' fill='%23321'/><circle cx='102' cy='62' r='1' fill='%23321'/><circle cx='28' cy='70' r='1' fill='%23321'/><circle cx='66' cy='82' r='1' fill='%23321'/><circle cx='12' cy='96' r='1' fill='%23321'/><circle cx='50' cy='102' r='1' fill='%23321'/><circle cx='90' cy='106' r='1' fill='%23321'/></svg>");
}

html[data-paper="newsprint"] {
  --paper-text: #2c3136;
  --paper-glow-1: #f6f5f2;
  --paper-glow-2: rgba(250, 250, 250, 0.2);
  --paper-base-1: #e5e2dc;
  --paper-base-2: #d6d3cc;
  --paper-fiber-1: rgba(40, 40, 40, 0.04);
  --paper-fiber-2: rgba(40, 40, 40, 0.02);
  --paper-fiber-opacity: 0.1;
  --paper-speck-opacity: 0.05;
  --paper-specks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><rect width='120' height='120' fill='none'/><circle cx='12' cy='18' r='1' fill='%23333'/><circle cx='46' cy='28' r='1' fill='%23333'/><circle cx='80' cy='14' r='1' fill='%23333'/><circle cx='98' cy='40' r='1' fill='%23333'/><circle cx='20' cy='52' r='1' fill='%23333'/><circle cx='62' cy='60' r='1' fill='%23333'/><circle cx='104' cy='66' r='1' fill='%23333'/><circle cx='32' cy='76' r='1' fill='%23333'/><circle cx='70' cy='88' r='1' fill='%23333'/><circle cx='14' cy='98' r='1' fill='%23333'/><circle cx='52' cy='104' r='1' fill='%23333'/><circle cx='92' cy='108' r='1' fill='%23333'/></svg>");
}

html[data-paper="evening"] {
  --paper-text: #23323a;
  --paper-glow-1: #f2efe7;
  --paper-glow-2: rgba(236, 242, 244, 0.25);
  --paper-base-1: #dfe4df;
  --paper-base-2: #c9d3d6;
  --paper-fiber-1: rgba(20, 35, 45, 0.05);
  --paper-fiber-2: rgba(20, 35, 45, 0.03);
  --paper-fiber-opacity: 0.12;
  --paper-speck-opacity: 0.07;
  --paper-specks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><rect width='120' height='120' fill='none'/><circle cx='12' cy='18' r='1' fill='%23233'/><circle cx='44' cy='26' r='1' fill='%23233'/><circle cx='78' cy='14' r='1' fill='%23233'/><circle cx='96' cy='38' r='1' fill='%23233'/><circle cx='20' cy='52' r='1' fill='%23233'/><circle cx='62' cy='58' r='1' fill='%23233'/><circle cx='104' cy='64' r='1' fill='%23233'/><circle cx='32' cy='74' r='1' fill='%23233'/><circle cx='70' cy='86' r='1' fill='%23233'/><circle cx='14' cy='98' r='1' fill='%23233'/><circle cx='52' cy='104' r='1' fill='%23233'/><circle cx='92' cy='108' r='1' fill='%23233'/></svg>");
}

body {
  background:
    radial-gradient(1200px 600px at 20% 10%, var(--paper-glow-1), transparent 60%),
    radial-gradient(1000px 500px at 80% 20%, var(--paper-glow-2), transparent 60%),
    linear-gradient(180deg, var(--paper-base-1), var(--paper-base-2));
  color: var(--paper-text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--paper-fiber-opacity);
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--paper-fiber-1) 0px,
      var(--paper-fiber-1) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      var(--paper-fiber-2) 0px,
      var(--paper-fiber-2) 1px,
      transparent 1px,
      transparent 7px
    );
  mix-blend-mode: multiply;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--paper-speck-opacity);
  background-image: var(--paper-specks);
  mix-blend-mode: multiply;
}