/* 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
   seam v1 — roster of 2026-08-15 (Story 6.1.3: ANY roster change bumps this line in the SAME PR)
   TWO DELIVERY PATHS — keep this file self-contained and portable:
     1. Inlined into the site's content-hashed CSS bundle (base.njk) — 8th
        of 9, after the vendored fgl layers + lawcuments.css, before
        style.css (the Story 4.4.1 single-bundle order; was first pre-fold).
     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).

   Since the @fgl/vituno adoption (Story 2.2.1): buttons and the focus ring
   moved to the framework layer — .btn* ships in the vendored fgl/buttons.css
   skinned by the token overrides in lawcuments.css, and the focus indicator
   is the framework ring (fgl/base.css) with --focus-ring re-valued to the
   Legal Pad red. What remains here is what the seam consumer needs and the
   framework does not own: the faces, the --lc-* palette, the reduced-motion
   floor, and the pad-panel signature surfaces. */

/* ── 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 retired at Story 2.2.1: page geometry now rides the
     framework's --content-full token, re-valued to the same 64rem in
     lawcuments.css. */
}

/* ── Accessibility floor: reduced motion ──────────────────────────────────── */
/* The focus indicator moved to the framework ring (fgl/base.css +
   --focus-ring in lawcuments.css) at Story 2.2.1 — a global :focus-visible
   outline here would stack a second ring on top of it. A future seam
   consumer (basilica, Story 2.1.2) decides its own focus treatment. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* animation-delay too (Story 4.3.3, B1-F57): with fill-mode `both` an
       unreset delay leaves delayed content BLANK for the delay window (the
       hero typing line vanished for 400ms) — zeroing duration alone is not
       a kill-switch. scroll-behavior matches fgl/base.css's block; both
       ride the seam to basilica. */
    animation-delay: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 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);
}