/*
  Dear Pages — Theme contract
  ---------------------------------------------------------------
  A theme is a set of CSS custom properties applied to :root plus a
  paper texture id. Built-in themes live in js/themes.js and are
  applied at runtime; the values below are the fallback defaults so
  the app still renders if no theme is loaded.

  Every distributable theme (JSON) must supply the `vars` listed
  here. Missing vars fall back to these values.
*/

:root {
  /* Desk / surroundings */
  --desk-bg: #2c2622;
  --desk-bg-2: #171310;
  --desk-glow: rgba(255, 236, 200, 0.10);

  /* Cover (the visible board around the paper) */
  --cover: #5a3a2a;
  --cover-2: #3d2418;
  --cover-edge: rgba(0, 0, 0, 0.55);
  --cover-stitch: rgba(255, 255, 255, 0.16);
  --cover-ink: #f6e6cf;

  /* Paper */
  --paper: #f6efdd;
  --paper-2: #efe5cd;
  --paper-edge: rgba(90, 70, 40, 0.25);
  --paper-line: rgba(90, 70, 40, 0.16);
  --paper-margin-line: rgba(180, 80, 70, 0.35);

  /* Ink */
  --ink: #2f2a24;
  --ink-soft: #6b6055;
  --ink-faint: #9a8f81;

  /* Accents */
  --accent: #8c5a34;
  --accent-2: #b8843f;
  --accent-ink: #fdf7ea;
  --danger: #a4462f;
  --done: #4d7a4e;

  /* Chrome */
  --ui-bg: rgba(0, 0, 0, 0.28);
  --ui-fg: #f0e6d4;
  --ui-border: rgba(255, 255, 255, 0.16);

  /* Type */
  --font-head: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-hand: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;

  /* Geometry */
  --page-radius: 4px;
  --book-radius: 10px;
  --line-height: 26px;
}

/* ---- Paper textures ------------------------------------------ */
/*
  Ruling follows the text rather than the page: the period is --line-height,
  which is also the line-height of the writing areas, and the texture scrolls
  with the text (background-attachment: local) so the lines never drift off the
  words. The fixed-line lists (routines, tasks, milestones) get the same
  texture on their own row track, so the left page matches the chosen paper
  instead of always looking ruled.
*/

html[data-paper="plain"] .writing__area,
html[data-paper="plain"] .rows {
  background-image: none;
}

html[data-paper="ruled"] .writing__area,
html[data-paper="ruled"] .rows {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--line-height) - 1px),
    var(--paper-line) calc(var(--line-height) - 1px),
    var(--paper-line) var(--line-height)
  );
  background-attachment: local;
}

html[data-paper="grid"] .writing__area,
html[data-paper="grid"] .rows {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--line-height) - 1px),
      var(--paper-line) calc(var(--line-height) - 1px),
      var(--paper-line) var(--line-height)
    ),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--line-height) - 1px),
      var(--paper-line) calc(var(--line-height) - 1px),
      var(--paper-line) var(--line-height)
    );
  background-attachment: local;
}

html[data-paper="dotted"] .writing__area,
html[data-paper="dotted"] .rows {
  background-image: radial-gradient(var(--paper-line) 1.1px, transparent 1.2px);
  background-size: var(--line-height) var(--line-height);
  background-position: 0 calc(var(--line-height) - 4px);
  background-attachment: local;
}