/* Parathas — shared design tokens & base, ported from the Claude Design charte */
@import url('https://fonts.googleapis.com/css2?family=Petrona:wght@400;500;600;700&family=Jost:wght@400;500;600;700&display=swap');

:root {
  --red: #891812;
  --orange: #b95418;
  --orange-bright: #e1642e;
  --green: #5c7f4c;
  --gold: #fcd372;
  --cream: #efe7db;
  --card: #fff7ec;
  --white: #ffffff;
  --ink: #3a2417;
  --muted: #8a7460;
  --muted-2: #b98a5a;
  --border: #e6cdaa;
  --border-soft: #eedbb6;
  --danger: #b3261e;
  --draft-bg: #fdf3e3;
  --filled-bg: #f2f6ee;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Petrona', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--orange); }
a:hover { color: var(--red); }
input { font-family: var(--sans); }
input:focus { outline: 3px solid var(--orange-bright); outline-offset: 2px; }
button { font-family: var(--sans); }

.btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; font: 600 20px var(--sans); min-height: 58px;
  text-align: center; transition: transform 0.08s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--red); color: var(--card); }
.btn-green { background: var(--green); color: var(--card); }
.btn-ghost { background: var(--white); border: 2px solid var(--border); color: var(--muted); }

/* Modal overlay shared by wizard confirmations */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(58,36,23,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 24px;
}
.modal-card {
  background: var(--card); border-radius: 20px; padding: 28px 24px;
  max-width: 380px; width: 100%;
  display: flex; flex-direction: column; gap: 16px; text-align: center;
}

/* Toast for autosave / errors */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--card); padding: 11px 18px; border-radius: 999px;
  font: 600 14px var(--sans); box-shadow: 0 6px 24px rgba(80,40,10,0.28);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--danger); }

.spin { width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid rgba(137,24,18,0.2); border-top-color: var(--red);
  animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; }