/* Element defaults and what applies to every page. Components style
   themselves inline through Ui.Style; the only classes here are the ones the
   highlighting script gives code tokens. Every value is a semantic token from
   /static/tokens.css. See Ui/DESIGN.md. */

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

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--type-body-md-font-family);
  font-size: var(--type-body-md-font-size);
  font-weight: var(--type-body-md-font-weight);
  line-height: var(--type-body-md-line-height);
  letter-spacing: var(--type-body-md-letter-spacing);
  transition:
    background-color var(--transition-theme),
    color var(--transition-theme);
}

/* Spacing comes from the Flex a page is laid out with, so no element brings
   a margin of its own. */
h1,
h2,
h3,
h4,
p,
ul,
ol,
pre {
  margin: 0;
}

ul,
ol {
  padding-inline-start: var(--pad-card);
}

/* A page is wide, but a line of running text stays short enough to read. */
p,
li {
  max-width: var(--layout-measure);
}

/* Headings take their text style from the component that renders them,
   since a heading's level says where it sits in the outline, not how it
   looks. Until one does, a heading is bold body text. */
h1,
h2,
h3,
h4 {
  font-size: inherit;
}

a {
  color: var(--color-link-default);
  transition: color var(--transition-hover);
}

a:hover {
  color: var(--color-link-hover);
}

/* One focus ring for everything, so no component can forget it. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Code shows exactly what to type: no ligature draws `->` as an arrow. */
code {
  font-family: var(--type-code-font-family);
  font-variant-ligatures: none;
}

/* Inline code is styled by Text.code; only blocks use the code
   text style. */
pre {
  font-size: var(--type-code-font-size);
  font-weight: var(--type-code-font-weight);
  line-height: var(--type-code-line-height);
  padding: var(--pad-control);
  overflow-x: auto;
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--shape-control);
  background: var(--color-bg-surface);
}

/* A linked type name in a signature reads as code, colored like a type. */
pre a {
  color: var(--syntax-type);
  text-decoration: none;
}

pre a:hover {
  color: var(--syntax-type);
  text-decoration: underline;
}

/* The highlighting script colours tokens inside a link too; the link's own
   colour wins, so the whole name reads as one link. */
pre a .token {
  color: inherit;
}

/* Code tokens, as /static/highlight.js and the playground's editor mark them.
   Bert's rule names come from packages/playground/src/highlight/bert.ts; the
   rest are Prism's TOML and JSON names. */
code .token:is(.comment, .doc-comment) {
  color: var(--syntax-comment);
}

code .token.string {
  color: var(--syntax-string);
}

code .token.escape {
  color: var(--syntax-string-escape);
}

code .token.test-name {
  color: var(--syntax-string-special);
}

code .token.keyword {
  color: var(--syntax-keyword);
}

code .token.boolean {
  color: var(--syntax-boolean);
}

code .token:is(.number, .date) {
  color: var(--syntax-number);
}

code .token.null {
  color: var(--syntax-builtin);
}

code .token:is(.nominal, .table) {
  color: var(--syntax-type);
}

code .token.builtin-type {
  color: var(--syntax-type-builtin);
}

code .token.module {
  color: var(--syntax-module);
}

code .token.constructor {
  color: var(--syntax-constructor);
}

code .token.parameter {
  color: var(--syntax-parameter);
}

code .token:is(.function-name, .qualified-name) {
  color: var(--syntax-function);
}

code .token.function-call {
  color: var(--syntax-function-call);
}

code .token.constant-name {
  color: var(--syntax-constant);
}

code .token:is(.field, .member, .property, .key) {
  color: var(--syntax-member);
}

code .token.operator {
  color: var(--syntax-operator);
}

code .token.punctuation {
  color: var(--syntax-punctuation);
}

/* The prompt of a shell session is not part of the command, so selecting a
   command to copy leaves it behind. */
code .token.shell-symbol {
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}