

:root {
  --paper:    #efe9df;
  --surface:  #f8f6f1;
  --surface-2:#e9e2d6;
  --fill-focus: #ffffff;
  --ink:      #17202e;
  --ink-soft: #33405a;
  --muted:    #5a667c;
  --line:     #d9d0c2;
  --accent:   #17202e;
  --accent-2: #2f6cb3;
  --accent-fill: #17202e;
  --accent-strong: #2f6cb3;
  --warn-strong: #8f5a0f;
  --radius:   14px;
  --shadow-card: 0 2px 5px rgba(23,32,46,.08), 0 16px 38px rgba(23,32,46,.14);
  --flake-rgb: 120, 128, 146;
}
:root { --muted: #5a667c; }

html.dark {
  --paper:    #14161c;
  --surface:  #1c2029;
  --surface-2:#232833;
  --surface-3:#2b3140;
  --ink:      #ece7dd;
  --ink-soft: #cdc6ba;
  --muted:    #9aa0ab;
  --line:     rgba(236,231,221,.12);
  --accent:   #ece7dd;
  --accent-2: #8fb4e0;
  --accent-fill: #ece7dd;
  --accent-strong: #2f6cb3;
  --warn-strong: #8f5a0f;
  --flake-rgb: 190, 196, 208;
}
html.dark .book, html.dark .go { color: #14161c; }

.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .5; background-image: var(--grain); background-size: 140px 140px;
}
html.dark .grain { opacity: .34; }

h1, h2, h3, .brand b {
  font-family: var(--sans);
  letter-spacing: -.02em;
}
h1, h2 { text-transform: uppercase; font-weight: 900; }

body {
  background-image:
    linear-gradient(to right, rgba(23,32,46,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,32,46,.05) 1px, transparent 1px);
  background-size: 96px 96px;
  background-attachment: fixed;
}
html.dark body {
  background-image:
    linear-gradient(to right, rgba(236,231,221,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(236,231,221,.05) 1px, transparent 1px);
}

#bg {
  background: var(--paper) !important;
}
html.dark #bg { background: var(--paper) !important; }

body::before { display: none !important; }

.card { border-radius: var(--radius); }

.btn, .book, .go, .bf-save {
  background: var(--accent-fill); color: var(--paper);
  border-radius: 999px; border: 0;
  box-shadow: 0 3px 8px rgba(23,32,46,.18), 0 14px 30px rgba(23,32,46,.20);
}
html.dark .btn, html.dark .bf-save { color: #14161c; }

