/* Amino Journal, almanac edition: warm white page, near-black ink, one saffron marker, five era colours.
   The recurring motif is the square cell: one cell per year, one cell per amino acid. */
:root {
  --bg: #fcfbf8;
  --panel: #f3f1eb;
  --panel-2: #e9e6dd;
  --ink: #17150f;
  --ink-2: #5a564c;
  --ink-3: #8d887b;
  --line: #dcd8cd;
  --line-2: #c4bfb1;
  --mark: #ffd23f;
  --on-mark: #17150f;
  --card: #ffffff;

  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;

  --r: 4px;
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --cell: 4px;
  --head-h: 98px;

  /* Default "era" values for things with no era. */
  --c: var(--ink);
  --t: var(--panel);
  --on: var(--bg);
  --no: #6d5f4b;

  /* Backdrop: three light pools + a faded field of rounded year cells (24px pitch) in the side gutters. */
  --pool-a: rgba(255, 210, 63, .22);
  --pool-b: rgba(29, 111, 191, .09);
  --pool-c: rgba(168, 100, 47, .11);
  --cells: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cpattern id='c' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5' fill='%2317150f' fill-opacity='.05'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23c)'/%3E%3Crect x='51' y='27' width='18' height='18' rx='2.5' fill='%23ffd23f' fill-opacity='.6'/%3E%3Crect x='147' y='99' width='18' height='18' rx='2.5' fill='%2317150f' fill-opacity='.12'/%3E%3Crect x='27' y='171' width='18' height='18' rx='2.5' fill='%2317150f' fill-opacity='.12'/%3E%3Crect x='195' y='195' width='18' height='18' rx='2.5' fill='%23ffd23f' fill-opacity='.5'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* Era colours (DB keeps the original keys: ochre, rust, olive, azure, magenta).
   Tobacco, cerulean, saffron, orchid, ultramarine: no green, no vermilion. */
.e-ochre   { --c: #a8642f; --t: #f5e8dc; --on: #ffffff; }
.e-rust    { --c: #1d6fbf; --t: #dfeaf7; --on: #ffffff; }
.e-olive   { --c: #c99000; --t: #fbf0cc; --on: #17150f; }
.e-azure   { --c: #9a3a9e; --t: #f4e3f4; --on: #ffffff; }
.e-magenta { --c: #4b40d8; --t: #e5e3fc; --on: #ffffff; }
.e-ink     { --c: var(--ink); --t: var(--panel); --on: var(--bg); }

/* Dark follows prefers-color-scheme on the first visit (set in index.html), then the reader's toggle. */
:root[data-theme="dark"] {
  --bg: #14120f; --panel: #1d1b17; --panel-2: #28251f; --ink: #efeadf; --ink-2: #b9b3a5; --ink-3: #8a8476;
  --line: #34302a; --line-2: #4a453c; --card: #1b1915; --no: #b8a78c; color-scheme: dark;
  --pool-a: rgba(255, 210, 63, .085);
  --pool-b: rgba(98, 166, 234, .075);
  --pool-c: rgba(209, 139, 85, .075);
  --cells: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cpattern id='c' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5' fill='%23efeadf' fill-opacity='.04'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23c)'/%3E%3Crect x='51' y='27' width='18' height='18' rx='2.5' fill='%23ffd23f' fill-opacity='.22'/%3E%3Crect x='147' y='99' width='18' height='18' rx='2.5' fill='%23efeadf' fill-opacity='.09'/%3E%3Crect x='27' y='171' width='18' height='18' rx='2.5' fill='%23efeadf' fill-opacity='.09'/%3E%3Crect x='195' y='195' width='18' height='18' rx='2.5' fill='%23ffd23f' fill-opacity='.18'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .e-ochre   { --c: #d18b55; --t: #2c2117; }
:root[data-theme="dark"] .e-rust    { --c: #62a6ea; --t: #142233; --on: #14120f; }
:root[data-theme="dark"] .e-olive   { --c: #e8b21c; --t: #2e2611; }
:root[data-theme="dark"] .e-azure   { --c: #d58ad8; --t: #2b1b2c; --on: #14120f; }
:root[data-theme="dark"] .e-magenta { --c: #8a82ff; --t: #1e1c3a; --on: #14120f; }