/* ============================================================
   Forward — shared design system (P1.1)
   One canonical token set. Every page links this file and
   deletes its own :root block. Old per-page names map onto these.
   ============================================================ */
:root{
  /* surfaces */
  --bg:#F3EFFB; --surface:#FFFFFF; --surface-2:#FAF8FE; --line:#E6E0F7; --line-strong:#D6CDEF;
  /* text — contrast-checked on white */
  --ink:#241C3B; --ink-soft:#6B6280; /* 5.7:1 */ --ink-muted:#756A8C; /* 5.0:1 — replaces faint for any TEXT */
  --ink-faint:#9E93B5; /* 2.9:1 — borders, icons, disabled only. Never body text. */
  /* brand */
  --purple:#6C4FF2; --purple-dark:#4E36C4; --purple-tint:#ECE7FD;
  /* pillars — semantic ONLY, never for generic buttons */
  --wellbeing:#1FAF93; --wellbeing-dark:#0E7A69; --wellbeing-tint:#DBF5EF;
  --behaviour:#FF8A3D; --behaviour-dark:#A94C0C; --behaviour-tint:#FFEADA;
  --bereavement:#C2447A; --bereavement-dark:#922A5C; --bereavement-tint:#FBE3ED;
  /* status */
  --success:#0E7A69; --danger:#B3261E; --warning:#A94C0C;
  /* shape & depth */
  --r-xl:22px; --r-l:18px; --r-m:14px; --r-s:10px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(36,28,59,.06),0 1px 1px rgba(36,28,59,.04);
  --shadow-2:0 8px 24px rgba(36,28,59,.08);
  --shadow-3:0 24px 48px rgba(36,28,59,.14);
  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* type */
  --font-display:'Fredoka',system-ui,sans-serif; --font-ui:'Inter',system-ui,sans-serif;
  --focus:0 0 0 3px rgba(108,79,242,.35);
}

/* ---- Global focus + accessibility ---- */
:focus-visible{outline:none;box-shadow:var(--focus);}
@media (pointer:coarse){ .btn,.icon-btn{min-height:44px;min-width:44px;} }
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   Buttons — solid purple primary (white on #6C4FF2 = 5.2:1)
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ui);font-size:14px;font-weight:600;line-height:1;
  padding:11px 18px;border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;transition:transform .12s ease,background .15s ease,border-color .15s ease,color .15s ease;
  text-decoration:none;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;transform:none;}

.btn--primary{background:var(--purple);color:#fff;box-shadow:var(--shadow-1);}
.btn--primary:hover{background:var(--purple-dark);}

.btn--secondary{background:var(--purple-tint);color:var(--purple-dark);}
.btn--secondary:hover{background:#E1D8FB;}

.btn--ghost{background:transparent;color:var(--ink-soft);border-color:var(--line-strong);}
.btn--ghost:hover{border-color:var(--purple);color:var(--purple-dark);}

.btn--danger{background:var(--danger);color:#fff;}
.btn--danger:hover{filter:brightness(.94);}

/* Icon-only button */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r-s);border:none;background:transparent;
  color:var(--ink-soft);cursor:pointer;transition:background .15s ease,color .15s ease;
}
.icon-btn:hover{background:var(--purple-tint);color:var(--purple-dark);}
.icon-btn.danger:hover{background:var(--bereavement-tint);color:var(--danger);}

/* ============================================================
   Cards
   ============================================================ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-1);padding:var(--s5);
}

/* ============================================================
   Chips & pillar tags
   ============================================================ */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);
  background:var(--surface-2);border:1px solid var(--line);
  padding:5px 12px;border-radius:var(--r-pill);
}

.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:4px 10px;border-radius:var(--r-pill);
}
/* Pillar tints verified for text contrast on their tint backgrounds (all >=4.5:1). */
.tag--wellbeing{background:var(--wellbeing-tint);color:var(--wellbeing-dark);}
.tag--behaviour{background:var(--behaviour-tint);color:var(--behaviour-dark);}
.tag--bereavement{background:var(--bereavement-tint);color:var(--bereavement-dark);}

/* ============================================================
   Form fields
   ============================================================ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4);}
.field label{font-size:13px;font-weight:700;color:var(--ink);}
.input,.textarea{
  width:100%;font-family:var(--font-ui);font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-m);
  padding:11px 14px;transition:border-color .15s ease,box-shadow .15s ease;
}
.input::placeholder,.textarea::placeholder{color:var(--ink-faint);}
.input:focus,.textarea:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus);}
.textarea{min-height:110px;resize:vertical;line-height:1.55;}

/* ============================================================
   Segmented control (tabs)
   ============================================================ */
.segmented{
  display:inline-flex;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px;gap:3px;
}
.segmented button{
  border:none;background:transparent;cursor:pointer;
  font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink-muted);
  padding:7px 16px;border-radius:var(--r-pill);transition:background .15s ease,color .15s ease;
}
.segmented button.active{background:var(--surface);color:var(--purple-dark);box-shadow:var(--shadow-1);}

/* ============================================================
   Modal (open/close driven by Forward.modal / Forward.confirm)
   Namespaced .fw-modal so it never collides with a page's own
   .modal class (index.html has its own 420px .modal boxes).
   ============================================================ */
.fw-modal{
  position:fixed;inset:0;z-index:1100;display:none;
  align-items:center;justify-content:center;padding:var(--s4);
  background:rgba(36,28,59,.45);backdrop-filter:blur(3px);
}
.fw-modal.open{display:flex;animation:forward-fade .18s ease;}
.fw-modal__panel{
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-3);
  width:100%;max-width:460px;padding:var(--s5);animation:forward-rise .2s ease;
}
.fw-modal__title{font-family:var(--font-display);font-size:20px;font-weight:600;margin:0 0 var(--s3);color:var(--ink);}
.fw-modal__body{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 var(--s5);}
.fw-modal__actions{display:flex;gap:var(--s3);justify-content:flex-end;flex-wrap:wrap;}
@keyframes forward-fade{from{opacity:0;}to{opacity:1;}}
@keyframes forward-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ============================================================
   Toast (supports an action button, e.g. Undo)
   Namespaced .fw-toast so it never collides with a page's own toast.
   ============================================================ */
.fw-toast-wrap{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:1200;display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;width:max-content;max-width:calc(100vw - 32px);
}
.fw-toast{
  display:flex;align-items:center;gap:14px;pointer-events:auto;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;
  padding:12px 16px;border-radius:var(--r-pill);box-shadow:var(--shadow-3);
  animation:forward-rise .2s ease;
}
.fw-toast__action{
  border:none;background:transparent;cursor:pointer;
  color:#C9BBFF;font-family:var(--font-ui);font-size:13.5px;font-weight:700;
  padding:2px 4px;
}
.fw-toast__action:hover{color:#fff;}

/* ============================================================
   Skeleton loading
   ============================================================ */
.skeleton{
  background:linear-gradient(90deg,var(--line) 25%,var(--surface-2) 37%,var(--line) 63%);
  background-size:400% 100%;border-radius:var(--r-s);animation:forward-shimmer 1.4s ease infinite;
}
@keyframes forward-shimmer{from{background-position:100% 0;}to{background-position:0 0;}}