/* A Rough Idea · design system v2 · base
 * Element defaults, in roles only (tokens.css). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The scrollbar's room is kept while the page is too short to scroll, so the page never jumps
   sideways when it starts to (after a section opens, say). Overlay scrollbars take no room. */
html { scrollbar-gutter: stable; }

/* hidden always hides, even on a component that sets its own display (.ds-button sets
   inline-flex, which would otherwise win). Inside a .ds-hold it keeps its space instead. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ds-ground);
  color: var(--ds-text);
  font-family: var(--ds-font-text);
  font-size: var(--ds-type-body);
  line-height: var(--ds-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ds-text);
  font-family: var(--ds-font-display);
  font-stretch: var(--ds-display-stretch);
  font-weight: var(--ds-weight-display);
  line-height: var(--ds-leading-tight);
  text-wrap: balance;
}

h1 { font-size: var(--ds-type-h1); }
h2 { font-size: var(--ds-type-h2); }
h3 { font-size: var(--ds-type-h3); }

p { text-wrap: pretty; }

/* Underline means "this text goes somewhere". Headings and labels are never underlined. */
a {
  color: var(--ds-text);
  text-decoration: underline;
  text-decoration-thickness: var(--ds-line);
  text-underline-offset: var(--ds-underline-offset);
}

a:hover { text-decoration-thickness: var(--ds-line-strong); }

/* A tool page's ground, on whatever element opts in (data-ds-page="tool"); on <body> or <html>
   it is the whole page's. */
[data-ds-page="tool"] { background: var(--ds-ground); }

/* One focus ring everywhere, inputs included. */
:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}

code,
kbd,
samp,
pre {
  font-family: var(--ds-font-mono);
}

::selection {
  background: var(--ds-ink);
  color: var(--ds-on-ink);
}