/* Doc Keeper - design tokens from the approved screens */
:root {
  --bg: #F3F4F1;
  --surface: #FFFFFF;
  --border: #DDE0DA;
  --ink: #18201C;
  --muted: #5A635D;
  --accent: #1E6B47;
  --accent-soft: #E7F0EA;
  --amber-bg: #FDF1DC; --amber: #8A4B06;
  --red-bg: #FBE5E2;   --red: #A3241B;
  --plate: #F6CB3F;
  --font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.topbar { display: flex; align-items: center; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; }

.page { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; max-width: 560px; }
.card h1 { margin: 0 0 8px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.card p { margin: 0 0 12px; color: var(--muted); }
.status { display: flex; align-items: center; gap: 8px; color: var(--accent) !important; font-weight: 600; margin-bottom: 0 !important; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }