/* /sign demo stage: tokens. Base = public/products/index.html :root (copied verbatim) + demo additions.
   Colour roles: navy = ground + ink, orange = brand accent + CTA + "awaiting", teal = Sign product. */
:root{
  /* products tokens, verbatim */
  --navy:#0B1D3A; --navy-2:#132B4F; --navy-line:#26364E; --navy-ctl:#5A6B85; --navy-meta:#8A97AB; --navy-body:#B9C2D0;
  --orange:#FF7A1A; --orange-hover:#E56800; --orange-ink:#B4510A; --orange-soft:#FFB37A; --orange-tint:#FFF1E5; --orange-tint-line:#FFD3AB;
  --teal:#14B8A6; --teal-ink:#0E7568; --teal-bright:#2DD4BF; --teal-tint:#F0FBF9; --teal-tint-line:#99E0D6; --teal-ink-hover:#0B5F55;
  --ok:#157A4B; --ok-tint:#E6F4EC; --ok-line:#BBE7C9; --error:#DC2626;
  --recall:#8A6410; --recall-tint:#FEF6E7; --recall-line:#F5DFAE;
  --ground:#FAFAFB; --ground-2:#F3F5F8; --surface:#fff; --surface-2:#F6F8FA;
  --line:#E5E8EE; --line-2:#F1F3F5; --ctl-line:#7B8BA1; --track:#E9EDF2; --mute:#CBD5E1;
  --body:#3D4C63; --meta:#566274;   /* demo: products has #64748B (4.36:1 on the app canvas); #566274 = 5.66:1 there, 6.19:1 on white */
  --r-pill:99px; --r-widget:22px; --r-chassis:16px; --r-card:14px; --r-small:10px; --r-control:8px; --r-nested:6px; --r-bar:4px;
  --sh-raised:0 1px 2px rgba(11,29,58,.04),0 8px 24px rgba(11,29,58,.06);
  --sh-float:0 12px 32px rgba(11,29,58,.16);
  --sh-lift-dark:0 24px 56px rgba(0,0,0,.45);

  /* stage */
  --stage:var(--navy);                 /* the one ground; never changes between scenes */
  --nav-h:56px; --band-h:72px;         /* 1440: nav + headline band = 128px, constant in every scene */
  --stage-gutter:max(32px, calc((100vw - 1280px)/2));
  --chassis-max-w:1280px;
  --chassis-h:calc(100svh - var(--nav-h) - var(--band-h) - 24px);   /* 748 at 900 tall; floor 560 */
  --chassis-edge:0 0 0 1px rgba(255,255,255,.10);                    /* hairline on navy */
  --sh-chassis:var(--chassis-edge), 0 24px 56px rgba(0,0,0,.35);
  --paper-edge:0 0 0 1px var(--line), 0 1px 2px rgba(11,29,58,.06); /* a PDF page on a light canvas */

  /* product-inside canvases (the product's own grounds, recoloured) */
  --app-canvas:var(--ground-2);        /* portal scene canvas (was #F3F4FA) */
  --app-line:var(--line);              /* was #E1E3EF */
  --app-ph:var(--meta);                /* placeholder (was #9a9dbb; --ctl-line was 3.47:1) */
  --sign-canvas:#EEF1F5;               /* signing page ground (was #eceef4) */
  --mail-canvas:#F3F4F6;               /* email shell ground, unchanged */

  /* status chips: text / fill / dot */
  --st-sent-fg:var(--navy);      --st-sent-bg:#EEF1F6;       --st-sent-dot:var(--navy);
  --st-viewed-fg:var(--teal-ink);--st-viewed-bg:var(--teal-tint); --st-viewed-dot:var(--teal-bright); /* hollow ring */
  --st-part-fg:var(--orange-ink);--st-part-bg:var(--orange-tint); --st-part-dot:var(--orange);
  --st-signed-fg:var(--teal-ink);--st-signed-bg:var(--teal-tint); --st-signed-dot:var(--teal);
  --st-declined-fg:#B91C1C;      --st-declined-bg:#FEF2F2;    --st-declined-dot:var(--error);
  --st-voided-fg:var(--meta);    --st-voided-bg:var(--line-2); --st-voided-dot:var(--mute);

  /* template editor */
  --pin-fill:rgba(20,184,166,.10); --pin-edge:var(--teal-ink); --pin-label:var(--teal-ink);
  --signer-1:var(--navy); --signer-2:var(--orange-ink); --signer-3:#BE3455; --signer-4:#475569;
  --sel-ring:var(--orange);             /* was lime */
  --guide:var(--error);                 /* alignment hairline while dragging */

  /* signing page overlays (product: indigo #171799/#2b2bd6 -> navy) */
  --sig-overlay:var(--navy); --sig-ink:var(--navy); --sig-miss:var(--error);

  /* type */
  --ff:'Lato',sans-serif;
  --fs-display:36px; --lh-display:1.12; --ls-display:-0.024em;   /* headline band, 1440 */
  --fs-rail:13px; --fs-ui:14px; --fs-ui-s:12.5px; --fs-cap:11.5px;

  /* motion */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-hover:150ms;      /* colour/border only */
  --t-state:140ms;      /* a button filling, a chip changing */
  --t-fade:160ms;       /* panel opacity */
  --t-enter:200ms;      /* row rise 8px */
  --t-spring:220ms;     /* send arrow scale .4 -> 1 */
  --t-draw:240ms;       /* timeline rail segment, rail indicator */
  --t-scene-out:200ms;  /* opacity only */
  --t-scene-in:360ms;   /* opacity + 24px travel */
  --t-object:480ms;     /* a shared object crossing between scenes */
  --t-count:780ms;      /* number count-up, 70ms stagger */
  --t-type:32ms;        /* per character; +140ms after , . ; */
  --t-caret:1060ms; --t-think:1400ms;
}
@media (max-width:700px){
  :root{ --nav-h:52px; --band-h:auto; --fs-display:26px; --lh-display:1.15; --stage-gutter:16px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-delay:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* type: self-hosted from /fonts/ (SIL Open Font License 1.1, licence files beside them). Lato is the UI, Arimo is the paper. */
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/lato-400.woff2) format('woff2'); }
@font-face { font-family:'Lato'; font-style:italic; font-weight:400; font-display:swap; src:url(/fonts/lato-400-italic.woff2) format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/lato-700.woff2) format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap; src:url(/fonts/lato-900.woff2) format('woff2'); }
@font-face { font-family:'Arimo'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/arimo.woff2) format('woff2'); }

/* base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--stage); color:#fff; font-family:var(--ff); font-size:var(--fs-ui); line-height:1.45; -webkit-font-smoothing:antialiased; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
/* on the light product surfaces the ring is the orange INK (5.09:1 on white, 4.66:1 on the canvas) */
.ds-office :focus-visible, .ds-phone-screen :focus-visible, #pageBook :focus-visible { outline-color:var(--orange-ink); }
.ds-sr{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ds-num{ font-variant-numeric:tabular-nums; }