@layer elements {
body {
    font-family: var(--font-sans);
    background: var(--color-white);
    line-height: 1.45;
    /* No `color` rule on body. Browser `button { color: inherit }` would
       otherwise pull body's value into every <button> via inheritance and
       mask variant colors when the variant class isn't applied. Components
       that need a default text color set it themselves. */
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

p { margin: 0; }

/* Bare links take the Pro's theme color, like every other link in the widget.
   They used to render in the desktop app's brand navy, which no widget uses. */
a { color: var(--theme-primary, var(--theme-primary-default)); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; cursor: pointer; }

code, pre { font-family: var(--font-mono); font-size: 13px; }
}