/* Update by Email customer dashboard: design tokens.
   Same family as updatebyemail.com and the gov site (Besley + Libre Franklin, the blue enamel plate),
   set calmer: smaller display type, more air, one blue plate per screen.
   Lift this file as-is. Everything in app.css reads from here. */

@font-face{font-family:"Besley";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/besley.woff2) format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/libre-franklin.woff2) format("woff2")}

:root{
  /* surfaces */
  --paper:#F3F5F9;        /* the page */
  --sheet:#FFFFFF;        /* records: the register, invoices, people, dialogs */
  --sunk:#E9EDF5;         /* wells inside a sheet, skeletons, the site frame's surround */
  /* text */
  --ink:#131B33;
  --muted:#4E5877;        /* 7.0:1 on paper */
  /* lines */
  --rule:#D3D9E7;         /* dividers, decorative */
  --edge:#7C86A2;         /* input and quiet-button borders, 3.4:1 on sheet */
  /* the plate: where a change is asked for and where it happens */
  --field:#1D3B98;
  --field-deep:#16307F;
  --on-field:#FFFFFF;
  --on-field-muted:#D3DBF6; /* 7.4:1 on field */
  --on-field-rule:rgba(255,255,255,.28);
  /* accents */
  --blue:#1D3B98;         /* focus rings, selected marks */
  --blue-ink:#1D3B98;     /* links */
  --tint:#E8EDFB;         /* selected rows, hover wells */
  --ok:#12804E;   --ok-tint:#E2F3EA; --ok-ink:#0B6B40;
  --warn:#7A4B00; --warn-tint:#FBF0D9; --warn-line:#D9A441;
  --no:#9A3B2E;   --no-tint:#FBE9E5;
  /* edit mode outlines sit on someone else's website, so they carry their own halo */
  --pick:#1D3B98; --pick-halo:#FFFFFF; --changed:#12804E;

  /* type */
  --display:"Besley",Georgia,"Times New Roman",serif;
  --body:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --t-13:.8125rem; --t-14:.875rem; --t-15:.9375rem; --t-16:1rem; --t-18:1.125rem;
  --t-22:1.375rem; --t-28:1.75rem; --t-36:2.25rem;

  /* space: 4-point steps */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px;

  /* shape: radius follows hierarchy, it is not one number */
  --r-control:10px;       /* buttons, inputs */
  --r-chip:999px;
  --r-sheet:14px;
  --r-plate:18px; --r-plate-inner:12px;

  --float:0 24px 60px rgba(13,22,56,.28), 0 2px 8px rgba(13,22,56,.12); /* only things that float: popovers, dialogs */
  --bar-h:64px;           /* top bar */
  --tabs-h:62px;          /* phone tab bar */
  color-scheme:light;
}

/* dark: follows the system unless the person picked a theme in the account menu */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1428; --sheet:#172042; --sunk:#111936; --ink:#E9EDF8; --muted:#A9B3CF;
  --rule:#2F3B66; --edge:#8492BD;
  --field:#1D3B98; --field-deep:#2647B5; --on-field-muted:#D3DBF6;
  --blue:#8FA8FF; --blue-ink:#A9BCFF; --tint:#202C5A;
  --ok:#5FD39A; --ok-tint:#123A2C; --ok-ink:#5FD39A; --warn:#F2C56B; --warn-tint:#3A2E12; --warn-line:#B98A2E;
  --no:#FF9F8F; --no-tint:#40201C;
  --float:0 24px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --paper:#0E1428; --sheet:#172042; --sunk:#111936; --ink:#E9EDF8; --muted:#A9B3CF;
  --rule:#2F3B66; --edge:#8492BD;
  --field:#1D3B98; --field-deep:#2647B5; --on-field-muted:#D3DBF6;
  --blue:#8FA8FF; --blue-ink:#A9BCFF; --tint:#202C5A;
  --ok:#5FD39A; --ok-tint:#123A2C; --ok-ink:#5FD39A; --warn:#F2C56B; --warn-tint:#3A2E12; --warn-line:#B98A2E;
  --no:#FF9F8F; --no-tint:#40201C;
  --float:0 24px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  color-scheme:dark;}