/* DearCalm design tokens. The one source of color for every page.
   Load this first in every page's <head>, before any other stylesheet. */
:root{
  --dc-bg:#332b27;          /* warm charcoal brown: page base */
  --dc-surface:#403730;     /* slightly lighter brown: inputs, nav, footer */
  --dc-surface-2:#51473f;   /* panels and cards */
  --dc-accent:#7d6858;      /* restrained warm brown: fills and highlights */
  --dc-faint:#a79b8d;       /* warm taupe: secondary labels */
  --dc-muted:#d6ccc0;       /* warm beige: muted text */
  --dc-ink:#f5efe7;         /* soft cream: primary text */
  --dc-text:#f5efe7;        /* same cream, for shared rules; pages may redefine --dc-ink locally */
  --dc-line:rgba(245,239,231,.18);  /* translucent warm cream: borders */
  --dc-focus:#f5efe7;       /* focus outline */
  --dc-shadow:rgba(20,16,13,.34);
  --ink:var(--dc-ink);
  --paper:var(--dc-bg);
  --line:var(--dc-line);
  --shell:var(--dc-surface-2);
  --shell-ink:var(--dc-ink);
  --shell-mute:var(--dc-muted);
  --shell-line:var(--dc-line);
}
/* Browser defaults that would otherwise pull in blue: links, visited links, text selection. */
a,a:visited{color:inherit}
::selection{background:var(--dc-accent);color:var(--dc-ink)}