/*
  Noctanotes shared design system — "Editorial" direction.
  Cream/off-white surfaces, near-black ink, a single burgundy accent used
  sparingly (hairline rules, kickers, links), serif display type for
  headings (Newsreader) paired with DM Sans body copy and IBM Plex Mono
  for small labels/metadata. No gradients, no drop shadows, no pill-shaped
  buttons — flat, quiet, consulting-report styling.

  Every page (landing, dashboard, notes viewer) should pull colors,
  spacing, and type from these custom properties rather than hardcoding
  values, so the palette stays consistent as pages get built out.
*/

:root {
  /* ── Surface ── */
  --bg:           #f7f5f0;
  --bg-deep:      #f0ede4;
  --panel:        #ffffff;
  --panel-soft:   #fbfaf6;

  /* ── Ink ── */
  --ink:          #1c1c1c;
  --ink-soft:     #5a5a5a;
  --ink-faint:    #9a9a92;
  --line:         #ddd8ca;
  --line-strong:  #c7c1b0;

  /* ── Accent — single burgundy, used sparingly ── */
  --accent:       #7a1f2b;
  --accent-soft:  #f3e6e4;
  --accent-dark:  #591620;

  /* ── Semantic ── */
  --ok:           #2f7a4f;
  --ok-bg:        #e8f3ea;
  --warn:         #96690f;
  --warn-bg:      #faf0dc;
  --err:          #9c2b2b;
  --err-bg:       #f8e6e6;

  /* ── Shape ── */
  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    10px;
  --border:       1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* ── Type ── */
  --font-serif:   'Newsreader', Georgia, serif;
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* ── Reusable component classes ── */

.ds-kicker {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}

.ds-chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-soft);
  background: var(--panel); border: var(--border); padding: 4px 10px; border-radius: var(--radius-sm);
}

.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 13.5px;
  border-radius: var(--radius-sm); padding: 13px 26px; cursor: pointer;
  border: none; transition: opacity .12s ease;
}
.ds-btn-primary { background: var(--ink); color: var(--bg); }
.ds-btn-primary:hover { opacity: .85; }
.ds-btn-ghost { background: none; color: var(--ink); border: var(--border-strong); }
.ds-btn-ghost:hover { background: var(--panel); }
.ds-btn:disabled, .ds-btn.disabled { opacity: .4; cursor: not-allowed; }

.ds-card {
  background: var(--panel); border: var(--border); border-radius: var(--radius-lg);
}

.ds-hairline {
  width: 40px; height: 2px; background: var(--accent);
}

.ds-status {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 100px; font-family: var(--font-mono);
}
.ds-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ds-status.ok   { background: var(--ok-bg);   color: var(--ok); }
.ds-status.warn { background: var(--warn-bg); color: var(--warn); }
.ds-status.err  { background: var(--err-bg);  color: var(--err); }