:root {
  --bordo: #461214;
  --bordo-soft: #5e1d1f;
  --bordo-deep: #2c0b0d;
  --azul: #98B5C7;
  --azul-soft: #b3c7d5;
  --azul-ink: #4d6f82;
  --cream: #DAD1C2;
  --cream-soft: #e8e0d2;
  --cream-deep: #DEDDE7;
  --verde: #ACBF69;
  --verde-soft: #bccd87;
  --verde-ink: #6c7d3e;
  --lavanda: #DEDDE7;
  --lavanda-soft: #ebeaf0;
  --lavanda-ink: #5e5d72;
  --rosa: #98B5C7;
  --rosa-soft: #b3c7d5;
  --salvia: #ACBF69;
  --salvia-soft: #bccd87;
  --oliva: #ACBF69;
  --oliva-soft: #bccd87;
  --terra: #DEDDE7;
  --terra-soft: #ebeaf0;
  --tinta: #2A1F1F;
  --tinta-soft: #4a3d3d;
  --rule: rgba(42,31,31,0.18);
  --rule-strong: rgba(70,18,20,0.42);
}

html, body { background: var(--azul); color: var(--tinta); }
body { font-family: 'Cormorant Infant', 'Cormorant Garamond', Georgia, serif; font-size: 17px; line-height: 1.5; }
.font-display { font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif; font-optical-sizing: auto; font-variation-settings: "opsz" 144; }
.font-script  { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; }
.font-mono-ed { font-family: 'Inter', ui-sans-serif, system-ui; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; font-size: 10.5px; }
.font-data    { font-family: 'Inter', ui-sans-serif, system-ui; font-weight: 300; letter-spacing: 0.04em; }
.smallcaps    { font-variant: all-small-caps; letter-spacing: 0.18em; }
.rule         { border-color: var(--rule); }
.rule-bordo   { border-color: var(--rule-strong); }

.strike-through { position: relative; color: var(--tinta-soft); }
.strike-through::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 52%;
  height: 1px; background: var(--bordo);
  transform-origin: left center;
  animation: strike .45s ease-out forwards;
}
@keyframes strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.check {
  width: 18px; height: 18px; border: 1px solid var(--rule-strong);
  border-radius: 2px; display: inline-flex; align-items: center; justify-content: center;
  flex: none; transition: all .35s ease-out; background: transparent;
  font-family: 'Fraunces', serif; font-size: 14px; line-height: 1; color: var(--bordo);
}
.check[data-state="doing"] { border-color: var(--bordo); background: rgba(70,18,20,.06); }
.check[data-state="done"]  { background: var(--bordo); border-color: var(--bordo); color: var(--cream); }
.check:hover { border-color: var(--bordo); }

.tab-btn { transition: color .35s ease-out, border-color .35s ease-out; padding: 6px 0; border-bottom: 1px solid transparent; }
.tab-btn:hover { color: var(--bordo); }
.tab-btn[data-active="true"] { color: var(--bordo); border-bottom-color: var(--bordo); }

.pr-track { height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.pr-fill  { position: absolute; left: 0; top: 0; height: 100%; transition: width .5s ease-out; }

.gantt-grid { background-image: linear-gradient(to right, var(--rule) 0 1px, transparent 1px 100%); background-size: var(--col-w) 100%; }
.gantt-band { transition: opacity .3s; }
.gantt-band:hover { opacity: .85; }

input[type="text"], input[type="date"], textarea {
  background: transparent; border: none; outline: none; color: var(--tinta);
  font-family: inherit; font-size: inherit; line-height: inherit;
}
input[type="text"]:focus, input[type="date"]:focus, textarea:focus { background: rgba(70,18,20,.04); }
textarea { resize: none; width: 100%; }
::placeholder { color: var(--tinta-soft); opacity: .55; font-style: italic; }

.card-drag  { cursor: grab; }
.card-drag:active { cursor: grabbing; }
.card-ghost { opacity: .35; }
.col-over   { background: rgba(70,18,20,.04); }

.reveal { animation: reveal .4s ease-out both; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.monogram { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; color: var(--bordo); letter-spacing: -0.04em; }

.scroll-x { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 4px; }

.ed-chip { border: 1px solid var(--rule); padding: 2px 8px; border-radius: 3px; }

.btn-ghost { border: 1px solid var(--rule-strong); color: var(--bordo); padding: 6px 12px; border-radius: 3px; transition: background .3s ease-out; font-family: 'Inter', sans-serif; font-weight: 300; letter-spacing: 0.16em; text-transform: uppercase; font-size: 10.5px; }
.btn-ghost:hover { background: rgba(70,18,20,.06); }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(90deg); }
.chev { transition: transform .3s ease-out; }

.underline-serif { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: .5px; text-decoration-color: var(--bordo); }

.ring-svg { transform: rotate(-90deg); }
.ring-svg circle { fill: none; stroke-width: 2; }
.ring-svg .bg { stroke: var(--rule); }
.ring-svg .fg { stroke-linecap: round; transition: stroke-dashoffset .6s ease-out; }

/* Toast */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: var(--bordo); color: var(--cream); padding: 10px 16px; border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 300; letter-spacing: 0.08em; animation: toast-in .3s ease-out; pointer-events: auto; }
.toast.error { background: #7a1b1e; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* PIN gate */
.pin-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.pin-input { width: 160px; text-align: center; font-size: 28px; letter-spacing: 0.5em; border-bottom: 1px solid var(--rule-strong); padding: 8px 0; background: transparent; outline: none; color: var(--tinta); font-family: 'Fraunces', serif; }

/* Loading */
.loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }