/* base.css — design tokens, reset, typography */

:root {
  /* Palette — warm paper / ink, tuned for long reading */
  --bg:        #f6f4ee;
  --bg-raised: #fffdf8;
  --bg-sunken: #efece3;
  --ink:       #2b2a26;
  --ink-soft:  #5c594f;
  --ink-faint: #8a8678;
  --line:      #e2ddd0;
  --line-soft: #ece8dd;
  --accent:    #b4541f;   /* iA-ish warm orange */
  --accent-2:  #1f6f6b;   /* teal for tags */
  --link:      #1763a6;
  --sel:       #fbe6d3;
  --danger:    #b23a3a;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-read: "iA Writer Quattro", "iA Writer Duo", Charter, Georgia, serif;
  --font-mono: "iA Writer Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 5px;
  --r-md: 9px;
  --r-lg: 14px;
  --sidebar-w: 320px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #1a1916;
    --bg-raised: #232220;
    --bg-sunken: #141312;
    --ink:       #e9e5da;
    --ink-soft:  #b6b1a4;
    --ink-faint: #807c70;
    --line:      #34322d;
    --line-soft: #2a2925;
    --accent:    #e08a4f;
    --accent-2:  #5bbdb6;
    --link:      #6fb3e8;
    --sel:       #3a2a1c;
    --danger:    #e07a7a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.4);
  }
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body { overflow: hidden; }

::selection { background: var(--sel); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

code, pre { font-family: var(--font-mono); font-size: .9em; }

.muted { color: var(--ink-faint); }

kbd {
  font-family: var(--font-mono);
  font-size: .8em;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
}

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }