/* ============================================================
   AFTERLIFE — author app design system
   ------------------------------------------------------------
   The standalone product every author signs into. This is NOT the
   reader embed: it wears ONE fixed Afterlife brand, the same for
   every tenant, and never the author's reader theme. The reader
   skin lives in styles.css and is themed per tenant; this file is
   deliberately separate so the two can never bleed into each other.

   This palette is tuned to Afterlife's marketing site: a royal
   violet, a soft mint, and heavy near-black display type over
   quiet mint→lilac washes. It keeps the same five-token shape and
   the same class/token names the app already relies on, so admin,
   the front door, and the auth pages re-skin from here without
   markup changes. These are the PRODUCT's values, fixed — nobody
   edits them through the app.
   ============================================================ */

:root {
  /* ===== AFTERLIFE BRAND — the product's own five, fixed ===== */
  --brand:   #6A34C0;   /* 1 · accent, actions, wordmark, code words (violet) */
  --ink:     #17181F;   /* 2 · display headings + body (near-black) */
  --bg:      #F6F5FA;   /* 3 · app background (cool lilac paper) */
  --comp-1:  #3FA98B;   /* 4 · positive / "live" (teal-green) */
  --comp-2:  #5A46D6;   /* 5 · links & secondary actions (indigo-violet) */

  /* Marketing display is a heavy neo-grotesque; Inter carries it at 800. */
  --title: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ===== SIGNATURE TINTS — the marketing washes, mixed lightly ===== */
  --mint:      #97D3C8;   /* the mint band / underline marker */
  --mint-soft: #DCEFEB;   /* quote-card / positive pill tint */
  --lilac:     #F4EEFB;   /* violet column tint / code-chip fill */
  --violet-deep: color-mix(in srgb, var(--brand) 78%, #000);  /* eyebrow / heading accent */

  /* ===== DERIVED — mixed from the five ===== */
  --card:      #ffffff;
  --ink-soft:  color-mix(in srgb, var(--ink) 52%, var(--bg));
  --rule:      color-mix(in srgb, var(--ink) 11%, var(--bg));
  --paper:     color-mix(in srgb, var(--ink) 3%,  var(--card));
  --paper-2:   color-mix(in srgb, var(--ink) 7%,  var(--card));
  --water:     var(--comp-2);   /* form focus ring */

  /* functional — fixed, never brand-settable, so an error can't look calm */
  --warn:      #C98A3C;
  --stop:      #B23B2C;

  /* soft, low, lilac-tinted elevation to match the marketing cards */
  --shadow-sm: 0 1px 2px rgba(23,24,31,.05), 0 2px 8px rgba(23,24,31,.05);
  --shadow-md: 0 2px 6px rgba(23,24,31,.05), 0 18px 40px rgba(106,52,192,.10);

  --radius: 16px;
  --radius-lg: 22px;
  --disc: var(--brand);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- page shell ----------------------------------------------------- */
.wrap  { max-width: 1224px; margin: 0 auto; padding: 26px 22px 40px; }
.page  { max-width: 640px;  margin: 0 auto; padding: 28px 20px 48px; }
.page.narrow { max-width: 560px; }

/* ---- the Afterlife wordmark (product identity in the app header) ----- */
.brandmark {
  display: inline-flex; align-items: baseline; gap: .5px;
  font-family: var(--title); font-weight: 800;
  font-size: 15px; letter-spacing: -.01em;
  color: var(--brand);
  text-transform: none;
}
.brandmark span { color: var(--ink); font-weight: 800; }

/* ---- eyebrow: the small violet label that sits above a heading ------ */
.eyebrow {
  display: inline-block;
  font-family: var(--sans); font-weight: 700;
  font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 12px;
}

/* ---- headings & text — heavy black display, marketing weight -------- */
h1 { font-family: var(--title); font-weight: 800; font-size: 1.9rem; color: var(--ink); margin: 0 0 8px; letter-spacing: -.025em; line-height: 1.08; }
h2 { font-family: var(--title); font-weight: 800; font-size: 1.25rem; margin: 26px 0 10px; letter-spacing: -.015em; }
h3 { font-family: var(--title); font-weight: 700; font-size: 1.02rem; margin: 18px 0 8px; letter-spacing: -.01em; }
p  { margin: 0 0 12px; }
a  { color: var(--comp-2); text-underline-offset: 2px; }
.muted   { color: var(--ink-soft); font-size: .9rem; }
.lead    { color: var(--ink-soft); margin: 0 0 20px; }
.mono    { font-family: var(--mono); }

/* the hand-drawn mint marker under a keyword, à la the hero */
.mark {
  background-image: linear-gradient(var(--mint), var(--mint));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% .34em;
  padding-bottom: .02em;
}

/* ---- cards & panels ------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.card.paper { background: var(--paper); box-shadow: none; }
.card.mint  { background: var(--mint-soft); border-color: transparent; box-shadow: none; }

.note {
  background: var(--lilac);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
  font-size: .92rem;
  margin: 14px 0;
}
.note.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--card)); }
.note.stop { border-left-color: var(--stop); background: color-mix(in srgb, var(--stop) 8%, var(--card)); }

/* ---- forms ---------------------------------------------------------- */
label { display: block; margin: 12px 0 6px; font-weight: 700; font-size: .9rem; }
input[type=text], input[type=email], input[type=number], input[type=color], select, textarea {
  width: 100%;
  padding: 12px 13px;
  font-size: 16px;
  font-family: var(--sans);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, var(--bg));
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--ink) 38%, var(--bg)); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
fieldset { border: 1px solid var(--rule); border-radius: var(--radius); margin: 18px 0; padding: 14px 16px; }
legend { font-weight: 700; font-size: .9rem; padding: 0 6px; }

/* ---- buttons -------------------------------------------------------- */
.btn, button.btn {
  display: inline-block;
  padding: 12px 20px;
  font-size: 15px; font-weight: 600;
  font-family: var(--sans);
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
}
.btn.ghost { background: var(--card); color: var(--brand); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.hidden { display: none; }

.disc { border-radius: 50%; flex: none; display: inline-block; }

/* ---- shared components (pill + the door-btn family) ----------------
   Same markup contract as before so admin.html's existing classes
   render unchanged — just in the marketing palette and type. */
.pill {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 9px 18px;
  text-align: center;
  min-width: 96px;
  box-shadow: var(--shadow-sm);
}
.pill .pill-k { display: block; font-size: 11.5px; color: var(--ink-soft); line-height: 1.2; }
.pill .pill-v { display: block; font-family: var(--title); font-weight: 800; font-size: 17px; color: var(--ink); line-height: 1.2; margin-top: 1px; }

.door-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.15;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .04s ease;
}
.door-btn:active { transform: translateY(1px); }
.door-btn:focus-visible { outline: 2px solid var(--comp-2); outline-offset: 2px; }
.door-btn.pill { border-radius: 999px; }

.door-btn.brand { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 6px 18px rgba(106,52,192,.24); }
.door-btn.brand:hover { background: color-mix(in srgb, var(--brand) 90%, #000); box-shadow: 0 8px 22px rgba(106,52,192,.30); }

/* the marketing "Go to App" — a near-black pill for the top-right CTA */
.door-btn.dark { background: #101319; color: #fff; border-color: #101319; }
.door-btn.dark:hover { background: #000; }

.door-btn.lime  { background: var(--comp-1); color: #fff; border-color: var(--comp-1); }
.door-btn.lime:hover { background: color-mix(in srgb, var(--comp-1) 90%, #000); }
.door-btn.blue  { background: var(--comp-2); color: #fff; border-color: var(--comp-2); }
.door-btn.blue:hover { background: color-mix(in srgb, var(--comp-2) 88%, #000); }
.door-btn.ghost { background: var(--card); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 20%, var(--bg)); }
.door-btn.ghost:hover { background: var(--paper); border-color: color-mix(in srgb, var(--ink) 40%, var(--bg)); }
.door-btn.quiet { background: var(--card); color: var(--ink-soft); border-color: var(--rule); }
.door-btn.quiet:hover { background: var(--paper); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 24%, var(--bg)); }
.door-btn.danger { background: var(--card); color: var(--stop); border-color: color-mix(in srgb, var(--stop) 34%, var(--card)); }
.door-btn.danger:hover { background: color-mix(in srgb, var(--stop) 7%, var(--card)); border-color: var(--stop); }
.door-btn.sm { padding: 9px 15px; font-size: 13.5px; border-radius: 9px; }
.door-btn[disabled] { opacity: .45; cursor: not-allowed; }