/* Paper design system — the palette and container ladder from the paperdesign
   wireframe, promoted out of that component so the whole application uses it.
   It used to declare these at :root inside its own scoped <style>, which meant
   they only existed on the page that rendered it; anything else either invented
   its own values or fell back to the shade scale, and the two drifted.
   Cool blue-grey palette taken from qoves.com's CSS variables. */

:root {
  --pp-cream: #b2c1c8;
  --pp-paper: #f9fbfb;
  --pp-border: #cddbe1;
  --pp-fg: #233137;
  --pp-gray: #758084;
  --pp-dark-gray: #515255;
  --pp-blue: #9aaeb5;
  --pp-band: #eaf1f4;
  --pp-sk: rgb(35 49 55 / 0.13);
  --pp-sk-soft: rgb(35 49 55 / 0.07);

  /* The container ladder every column on the site aligns to: nav bar and its
     dropdown, .pp-container, the wireframe grid, the docs column. */
  --pp-container: 1080px;
  --pp-container-wide: 1321px;
}

html.scheme-dark {
  --pp-cream: #1b262b;
  --pp-paper: #0d1417;
  --pp-border: #2f3f46;
  --pp-fg: #eef4f6;
  --pp-gray: #758084;
  --pp-dark-gray: #9aaeb5;
  --pp-band: #3c4f57;
  --pp-sk: rgb(238 244 246 / 0.16);
  --pp-sk-soft: rgb(238 244 246 / 0.09);
}

/* ===== texture layers =====
 * paper.design stacks three of these and runs no shader at all (its /docs page
 * has zero canvases): a repeating paper grain at 0.5, a 120px grid at 0.3, and
 * a ruler strip at 0.4. Ours are drawn rather than fetched, so there is no
 * image to ship, and they take their ink from the palette above.
 *
 * Each is a positioned, pointer-events:none layer. Put them inside something
 * with position:relative and give the content a higher stacking order.
 */

:root {
  --pp-grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cline x1='60.25' y1='0' x2='60.25' y2='120' stroke='%23233137' stroke-width='0.5' stroke-dasharray='7.56 7.56'/%3E%3Cline x1='0' y1='60.25' x2='120' y2='60.25' stroke='%23233137' stroke-width='0.5'/%3E%3C/svg%3E");
}

html.scheme-dark {
  --pp-grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cline x1='60.25' y1='0' x2='60.25' y2='120' stroke='%23eef4f6' stroke-width='0.5' stroke-dasharray='7.56 7.56'/%3E%3Cline x1='0' y1='60.25' x2='120' y2='60.25' stroke='%23eef4f6' stroke-width='0.5'/%3E%3C/svg%3E");
}

.paper-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--pp-grid-tile);
  background-size: 120px 120px;
  background-position: calc(50% + 60px) 0;
  background-repeat: repeat;
  opacity: 0.3;
}

/* Vertical ruler down the right edge, ticks every 8px with a longer one every
   40px, the same rhythm the wireframe uses. */
.paper-ruler {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 16px;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--pp-border) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, var(--pp-border) 0 1px, transparent 1px 40px);
  background-size: 6px 100%, 12px 100%;
  background-position: right top, right top;
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* Paper grain. Drawn as a fine dot lattice rather than shipping a PNG. */
.paper-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--pp-fg) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  opacity: 0.05;
}