/* Futuras.ai, black and white. The whole system in one file
   (docs/brand/futurus-law/directions/esign/frames/2026-10-09-futuras-ai-bw-r1/brand.md). */
:root{
  --ink:#121a22; --paper:#ffffff;
  --g800:#2a3138; --g700:#3e454c; --g600:#5e656b; --g500:#868b90; --g300:#c9ccce; --g200:#e3e5e6; --g100:#f1f2f2; --g50:#f8f8f8;
  --on-ink:#ffffff; --on-ink-muted:#a9aeb2; --on-ink-rule:#2f373e;
  --sans:Seravek,"Segoe UI","Avenir Next","Gill Sans",Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Charter,Georgia,serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  --hand:"Snell Roundhand","Segoe Script",cursive;
  --ease:cubic-bezier(.2,.7,.2,1); --t:240ms;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --r-ui:10px; --r-card:14px;
  /* Semantic layer: pages use these, so the night ground is one block below. A document sheet
     (anything that stands for paper) keeps --paper and --ink in both modes. */
  --bg:var(--paper); --fg:var(--ink); --strong:var(--g700); --muted:var(--g600); --faint:var(--g500);
  --rule:var(--g300); --hair:var(--g200); --surface:var(--g50); --wash:var(--g100);
  --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-hover:var(--g800);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121a22; --fg:#ffffff; --strong:#d5d8da; --muted:#a9aeb2; --faint:#7c838a;
    --rule:#3a434b; --hair:#2f373e; --surface:#18212a; --wash:#0d141a;
    --btn-bg:#ffffff; --btn-fg:#121a22; --btn-hover:#e3e5e6;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.preview-host body{visibility:hidden}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--sans);text-decoration:none;border:1px solid var(--btn-bg);transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.btn.primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn.primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn.primary:active{transform:scale(.98)}
.btn.ghost{background:none;color:var(--fg);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--fg)}
.eyebrow{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* The one living element: a signature stroke that writes itself once. */
.sig path{stroke-dasharray:var(--len);stroke-dashoffset:0}
.sig.write path{animation:write var(--dur,.4s) linear var(--delay,0s) both}
@keyframes write{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.still .sig.write path{animation:none}
@media (prefers-reduced-motion:reduce){.sig.write path{animation:none}}
@media print{.sig.write path{animation:none}}