/*
  Design Plan:
  1. Subject: qa108-15-503d33 — a personal, encrypted-feel, quiet, private notebook and sanctuary.
  2. Idea: On this site, the tactile serenity of a cloth-bound archival journal becomes a clean editorial workspace with distinct reading, editing, and listing modes.
  3. Ground / Ink / Accent:
     --color-ground: #fbf9f5 (soft archival linen)
     --color-ink: #1f2328 (deep carbon charcoal)
     --color-accent: #2c5e4f (rich evergreen leather)
     Supporting:
     --color-tint: #f0ebe1 (muted page card ground)
     --color-muted: #656d76 (subdued pencil graphite)
     --color-danger: #a4262c (brick red wax seal for destructive actions)
  4. Type:
     --font-display: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif
     --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
*/

:root {
  --color-ground: #fbf9f5;
  --color-ink: #1f2328;
  --color-accent: #2c5e4f;
  --color-tint: #f0ebe1;
  --color-muted: #656d76;
  --color-danger: #a4262c;

  --color-accent-soft: color-mix(in oklch, var(--color-accent) 12%, var(--color-ground));
  --color-accent-hover: color-mix(in oklch, var(--color-accent) 85%, black);
  --color-danger-soft: color-mix(in oklch, var(--color-danger) 10%, var(--color-ground));

  --font-display: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-size-hero: 2.5rem;
  --font-size-title: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius: 0px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::selection {
  background-color: var(--color-accent-soft);
  color: var(--color-ink);
}

body {
  background-color: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  caret-color: var(--color-accent);
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-accent-hover);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}