/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #040a09 #28312d #f8f5ef #1f4a41 #2f6f63 #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #f8f5ef;
  --surface: #fcfbf8;
  --surface-2: #ece9e4;
  --border: #d6d4cf;
  --border-strong: #afafaa;
  --ink: #28312d;
  --muted: #686c68;
  --accent: #1f4a41;
  --accent-hover: #1a3f37;
  --accent-ink: #ffffff;
  --accent-text: #2f6f63;
  --accent-strong: #1f4a41;
  --accent-soft: #daddd7;
  --accent-border: #96a8a1;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dde7da;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f0e2d3;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f0dbd6;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — Prevoice.
 *
 * Character: calm, paper-like, quiet. Soft corners, hairline rules, a lot
 * of breathing room, and the accent kept for totals and the one primary
 * action per screen. Numbers set in the monospace face throughout so
 * amounts line up the way they would on a real invoice.
 * ==================================================================== */

:root {
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;

  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
  --shadow-raised: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
    0 12px 28px color-mix(in srgb, var(--ink) 7%, transparent);

  --dur-1: 140ms;
  --dur-2: 260ms;

  --content-max: 1180px;
  --measure: 68ch;
}

/* ---------------------------------------------------------------- brand */

.brand-mark {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand-name {
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------- page rhythm */

.page-title {
  letter-spacing: -0.02em;
}

/* Numbers read like a ledger: monospace, tabular. */
.nums {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------- line item builder */

.line-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.line-item-row .li-desc {
  flex: 1 1 200px;
  min-width: 160px;
}

.line-item-row .li-qty {
  flex: 0 0 72px;
  width: 72px;
}

.line-item-row .li-price {
  flex: 0 0 110px;
  width: 110px;
}

.line-item-row .li-tax {
  flex: 0 0 84px;
  width: 84px;
}

.line-item-row .input {
  width: 100%;
}

@media (max-width: 560px) {
  .line-item-row .li-qty,
  .line-item-row .li-price,
  .line-item-row .li-tax {
    flex: 1 1 90px;
    width: auto;
  }
}

/* Quick-add plan chips read as small ledger tags, not big buttons. */
.plan-chip {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
}

/* .chip sets display:inline-flex unconditionally, which otherwise beats the
   browser's own [hidden] rule — this is what actually hides a filtered-out
   plan chip. */
.plan-chip[hidden] {
  display: none;
}

/* ------------------------------------------------------------ document */

.print-doc .card {
  border-color: var(--border);
}

/* ------------------------------------------------------------------ print */

@media print {
  .no-print,
  .topbar,
  .toasts,
  .route-progress,
  dialog {
    display: none;
  }

  body,
  .shell,
  .content {
    background: var(--canvas);
    margin: 0;
    padding: 0;
  }

  .print-doc .card {
    box-shadow: none;
    border: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms;
    animation-duration: 0.001ms;
  }
}