/* Haven — shared styles (used by Haven.html and index.php) */
:root {
    /* warm calm palette */
    --canvas: #faf5f0;
    --surface: #ffffff;
    --surface-2: #f6efe8;
    --ink: #2c2521;
    --ink-2: #6d6258;
    --ink-3: #9c9085;
    --line: #ece2d8;
    --line-2: #e2d6ca;

    --primary: #c2557a;
    --primary-ink: #a23d62;
    --primary-soft: #f8e7ee;

    --amber: #d99a4e;
    --amber-ink: #b87a2f;
    --amber-soft: #f8ecda;

    /* category hues (soft, harmonious) */
    --core: #4f9d8b;
    --core-soft: #e3efeb;
    --capacity: #c2557a;
    --capacity-soft: #f8e7ee;
    --capital: #d99a4e;
    --capital-soft: #f8ecda;

    --good: #4f9d8b;
    --good-soft: #e3efeb;
    --warn: #d99a4e;
    --warn-soft: #f8ecda;
    --alert: #cc6b5a;
    --alert-soft: #f7e4df;

    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 26px;
    --shadow-sm: 0 1px 2px rgba(44,37,33,0.04), 0 1px 3px rgba(44,37,33,0.05);
    --shadow: 0 2px 6px rgba(44,37,33,0.05), 0 8px 24px rgba(44,37,33,0.06);
    --shadow-lg: 0 12px 40px rgba(44,37,33,0.12);

    --sans: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    --serif: 'Newsreader', Georgia, serif;

    --gap: 22px;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  body {
    font-family: var(--sans);
    background: var(--canvas);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  #root { height: 100%; }
  button { font-family: inherit; cursor: pointer; }
  ::selection { background: var(--primary-soft); }

  /* density */
  [data-density="compact"] { --gap: 16px; }
  [data-density="comfy"] { --gap: 28px; }

  /* scrollbars */
  *::-webkit-scrollbar { width: 11px; height: 11px; }
  *::-webkit-scrollbar-thumb { background: #ddcfc1; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background: #cdbcab; background-clip: content-box; }
  *::-webkit-scrollbar-track { background: transparent; }

  .fade-in { animation: fadeIn .4s ease both; }
  @keyframes fadeIn { from { transform: translateY(8px); } to { transform: none; } }
  @keyframes pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }