/* ABG design identity — "a quiet institution".
   Soul reference: mythic_city_portrait_style_guide.md + the live Schedule app.
   Every utility loads this first and builds on these tokens.
   Rules: separation by tone + soft shadow, never border lines. Gold small-caps
   inscriptions. One large quiet centerpiece per view. Warm near-black, never #000.
   Whitespace is the sky. Few calm words. */

:root {
  --parchment: #f6efdc;      /* the field */
  --parchment-deep: #efe4c6; /* recessed areas */
  --card: #fdf8ea;           /* raised surfaces */
  --haze: rgba(246, 239, 220, 0.65);
  --ink: #2e2617;            /* warm near-black, never neutral black */
  --ink-soft: #6f6247;
  --ink-faint: #a1926f;      /* dissolving / done / past */
  --gold: #a9812f;           /* institutional ink */
  --gold-soft: #c9a96a;
  --shadow: 0 10px 30px rgba(70, 55, 20, 0.10), 0 2px 8px rgba(70, 55, 20, 0.06);
  --shadow-near: 0 16px 44px rgba(70, 55, 20, 0.14), 0 3px 10px rgba(70, 55, 20, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Gold engraved label — BACKLOG · SCHEDULED · MON */
.inscription {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* The quiet footer hint — "SWIPE · PINCH · SCROLL TO ZOOM" */
.whisper {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

/* One per view. Large, light, centered. */
.centerpiece {
  font-weight: 300;
  font-size: clamp(40px, 8vw, 72px);
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--card);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 0.55em 1.25em;
  font: inherit;
  font-size: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.15s ease, opacity 0.3s ease;
}
.pill:hover { box-shadow: var(--shadow-near); }
.pill:active { transform: scale(0.985); }
.pill.gold { color: var(--gold); }
.pill.settled { background: var(--parchment-deep); box-shadow: none; color: var(--ink-soft); }

/* A raised card with a placard's composure */
.placard {
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 28px;
}

/* Small colored dot — project colors appear only as jewels */
.jewel {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}

/* States dissolve toward the parchment, they don't gray out */
.receding { color: var(--ink-faint); opacity: 0.75; }
.dissolved { color: var(--ink-faint); opacity: 0.45; }

/* Modal scrim = haze, not darkness */
.veil {
  position: fixed; inset: 0;
  background: rgba(240, 230, 200, 0.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}

.fade-in { animation: dissolveIn 0.45s ease both; }
@keyframes dissolveIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

::selection { background: var(--gold-soft); color: var(--ink); }