app/static/css/app.css

/* ParaPilot design system — editorial-legal refinement on Tailwind utilities.
   Trustworthy editorial: deep navy ink + warm brass accent on cream paper,
   serif display headings, generous whitespace, light + dark. */

:root {
  /* Editorial-legal palette: deep navy ink + warm brass accent. */
  --pp-accent: 47 74 115;         /* navy       */
  --pp-accent-strong: 26 42 71;   /* deep navy  */
  --pp-violet: 166 124 82;        /* warm brass */
}

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial display headings — serif. */
h1, h2, .pp-serif {
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Times New Roman", serif;
  letter-spacing: -0.005em;
}

/* Subtle page background wash (light + dark). */
.pp-bg {
  background-image:
    radial-gradient(60rem 60rem at 110% -10%, rgb(var(--pp-violet) / 0.10), transparent 55%),
    radial-gradient(50rem 50rem at -10% 0%, rgb(var(--pp-accent) / 0.08), transparent 50%);
}
.dark .pp-bg {
  background-image:
    radial-gradient(60rem 60rem at 110% -10%, rgb(var(--pp-violet) / 0.14), transparent 55%),
    radial-gradient(50rem 50rem at -10% 0%, rgb(var(--pp-accent) / 0.16), transparent 50%);
}

/* Gradient brand text (navy -> brass). */
.pp-gradient-text {
  background-image: linear-gradient(
    100deg, rgb(var(--pp-accent-strong)), rgb(var(--pp-violet))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Card — warm paper. */
.pp-card {
  border-radius: 1rem;
  border: 1px solid rgb(223 213 196);          /* warm taupe */
  background: rgb(255 253 248 / 0.9);          /* warm white */
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgb(40 33 22 / 0.05), 0 10px 28px -14px rgb(40 33 22 / 0.16);
}
.dark .pp-card {
  border-color: rgb(72 66 55 / 0.7);           /* warm slate */
  background: rgb(24 28 38 / 0.6);             /* warm dark  */
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 28px -14px rgb(0 0 0 / 0.6);
}

/* Stepper rail. */
.pp-rail::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  background: linear-gradient(
    to bottom, rgb(var(--pp-accent) / 0.5), rgb(var(--pp-violet) / 0.4)
  );
}

/* Step node button. */
.pp-step {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease,
    background-color .12s ease;
}
.pp-step:hover { transform: translateY(-1px); }
.pp-step[data-active="true"] {
  border-color: rgb(var(--pp-accent-strong));
  box-shadow: 0 0 0 3px rgb(var(--pp-accent) / 0.18);
}

/* Step index bubble. */
.pp-bubble {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  color: white;
  background: linear-gradient(135deg, rgb(var(--pp-accent)), rgb(var(--pp-violet)));
  box-shadow: 0 4px 12px -4px rgb(var(--pp-accent) / 0.6);
}
.pp-bubble--sub {
  background: linear-gradient(135deg, rgb(180 132 70), rgb(146 99 45)); /* brass -> bronze */
  box-shadow: 0 4px 12px -4px rgb(146 99 45 / 0.5);
}

/* Inline citation chip. */
.pp-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  margin: 0 0.08rem;
  border-radius: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
  color: rgb(var(--pp-accent-strong));
  background: rgb(var(--pp-accent) / 0.12);
  text-decoration: none;
  transition: background-color .12s ease;
}
.pp-cite:hover { background: rgb(var(--pp-accent) / 0.24); }

/* Confidence meter. */
.pp-meter { height: 0.5rem; border-radius: 999px; background: rgb(228 220 205); overflow: hidden; }
.dark .pp-meter { background: rgb(60 54 45); }
.pp-meter > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, rgb(var(--pp-accent)), rgb(var(--pp-violet)));
}

/* htmx loading affordance. */
.htmx-indicator { opacity: 0; transition: opacity .15s ease; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Fade-in for swapped content. */
@keyframes pp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pp-fade { animation: pp-fade-in .22s ease both; }

/* Focus ring. */
.pp-focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--pp-accent) / 0.4);
}