/* ════════════════════════════════════════════════════════════════════════
   vigil · brand tokens v4
   Dark-first. One face. One flame.
   The vigil flame is the single mark of the house — the same gradient drop
   in the nav, the hero, the app splash, and the footer. Nothing else may
   stand in as the logo.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* night — the dark the house sits in */
  --night: #0c0f14;
  --evening: #12161d;
  --evening-2: #1a1f28;
  --evening-3: #232a35;

  /* dawn — the light we read by */
  --dawn: #ece4d6;
  --dawn-soft: rgba(236, 228, 214, 0.72);

  /* candle — the flame itself */
  --candle: #e3b26a;
  --candle-lit: #f2dcae;
  --candle-deep: #c98b3c;
  --glow: rgba(227, 178, 106, 0.55);
  --glow-soft: rgba(227, 178, 106, 0.16);

  /* clay — the ember, used sparingly for heat and crisis */
  --clay: #b6502e;
  --clay-lit: #d4785c;
  --rose: #e8a090;

  /* sky — the cool hour, for fog and unresolved things */
  --dusk-blue: #7a8fa3;
  --fog-blue: #9aa7b0;
  --sage: #869c7e;

  /* text */
  --muted: #b8bfc6;
  --dim: #8b949e;
  --hair: rgba(236, 228, 214, 0.16);
  --hair-soft: rgba(236, 228, 214, 0.1);
  --hair-faint: rgba(236, 228, 214, 0.06);

  /* shape + motion */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-arch: 999px 999px 14px 14px; /* the doorway arch */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-lift: 0 18px 50px -12px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 24px -4px var(--glow);

  --font: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* the one mark — inline SVG uses currentColor for the word, these stops for
   the flame. Anywhere the mark appears it is the same file of stops:
   candle-lit at the heart, candle at the body, deep at the base. */
.vigil-flame-stop-1 { stop-color: var(--candle-lit); }
.vigil-flame-stop-2 { stop-color: var(--candle); }
.vigil-flame-stop-3 { stop-color: var(--candle-deep); }

/* legacy aliases used by older pages during migration */
:root {
  --bone: var(--evening);
  --bone-deep: var(--night);
  --bone-card: var(--evening-2);
  --slate: var(--dawn);
  --stone: var(--muted);
  --amber: var(--candle);
  --amber-lit: var(--candle-lit);
  --amber-soft: #e3cda0;
  --fern: var(--candle);
  --fog: var(--dim);
  --ash: var(--muted);
  --dusk: var(--night);
  --dusk-2: var(--evening);
  --dusk-3: #2c2722;
  --line: var(--hair);
  --serif: var(--font);
  --body: var(--font);
}

/* ── the house scrollbar: thin, dark, a wick of candle ─────────────────────
   Kills the default light chrome (white track, arrow buttons) everywhere —
   page scroll, the sitting with Wren, the doors overlay, every panel. */
:root { color-scheme: dark; }
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(227, 178, 106, 0.32) rgba(18, 22, 29, 0.55);
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: rgba(12, 15, 20, 0.55); }
*::-webkit-scrollbar-thumb {
  background: rgba(227, 178, 106, 0.26);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(227, 178, 106, 0.48);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }