/* lawcuments.com — brand tokens & chrome primitives (Direction B, "Legal Pad").
   Decided 2026-07-10; spec: docs/superpowers/specs/2026-07-10-marketing-front-door-design.md

   TWO DELIVERY PATHS — keep this file self-contained and portable:
     1. Inlined FIRST into the site's content-hashed CSS bundle (base.njk).
     2. Served byte-identical at the STABLE URL /assets/css/brand.css for the
        basilica app's runtime consumption (Story 2.1.2; docs/seam-contract.md).
   Rules: tokens + brand-wide primitives ONLY — page/section layout lives in
   style.css. Font URLs are root-relative on purpose: a cross-origin consumer
   resolves them against THIS stylesheet's origin (lawcuments.com). */

/* ── Self-hosted faces (SIL OFL — see src/assets/fonts/OFL-*.txt) ─────────── */
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/caveat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  /* palette (spec: Visual direction, Direction B) */
  --lc-canary: #FFE977;      /* pad panels, highlight marks */
  --lc-ink: #1E2A3A;         /* type, CTAs */
  --lc-rule-blue: #9CB6D8;   /* pad rule lines, link underlines */
  --lc-margin-red: #D9503F;  /* margin line, focus rings, arrows */
  --lc-paper: #FEFEF9;       /* page ground */
  /* derived */
  --lc-ink-soft: #3C4859;    /* body copy on paper */
  --lc-ink-hover: #2E415C;   /* CTA hover */
  --lc-hairline: #E0DCCC;    /* card borders, separators */
  /* type roles */
  --lc-display: "Jost", Futura, "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --lc-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lc-hand: "Caveat", "Noteworthy", cursive;
  /* rhythm: pad rule spacing — type in pad panels sits ON these lines */
  --lc-line: 30px;
  --lc-measure: 64rem;
}

/* ── Accessibility floor: focus & reduced motion ──────────────────────────── */
:focus-visible {
  outline: 3px solid var(--lc-margin-red);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--lc-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  background: var(--lc-ink);
  color: #fff;
  text-decoration: none;
  padding: 0.8125rem 1.5rem;
  border-radius: 6px;
}
.btn:hover {
  background: var(--lc-ink-hover);
}
.btn--quiet {
  background: transparent;
  color: var(--lc-ink);
  border: 2px solid var(--lc-ink);
}
.btn--quiet:hover {
  background: var(--lc-canary);
  color: var(--lc-ink);
}
.btn--small {
  font-size: 0.9rem;
  padding: 0.55rem 1.05rem;
}

/* ── Pad panel — the signature surface ────────────────────────────────────── */
.pad-lines {
  position: relative;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--lc-line) - 1px),
      var(--lc-rule-blue) calc(var(--lc-line) - 1px),
      var(--lc-rule-blue) var(--lc-line)
    ),
    var(--lc-canary);
}
.pad-lines--margin::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62px;
  width: 4px;
  border-left: 1px solid var(--lc-margin-red);
  border-right: 1px solid var(--lc-margin-red);
}