@import "part:@lyra/base/theme/variables/brand-colors-style";
@import "part:@lyra/base/theme/variables/gray-colors-style";

:root {
  --text-color: var(--gray-darkest);
  --text-color-secondary: var(--gray-dark);
  --text-muted: var(--gray-light);
  --abbr-border-color: var(--gray-light);
  --headings-small-color: var(--gray-light);
  --link-color: var(--brand-primary);
  --link-hover-color: color(var(--brand-primary) lightness(+ 25%));
  --link-hover-decoration: underline;
  --font-family-sans-serif: "Roboto", helvetica, arial, sans-serif;
  --font-family-serif: Georgia, "Times New Roman", Times, serif;
  --font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
  --font-family-base: var(--font-family-sans-serif);
  --font-size-base: 1rem;
  --font-size-huge: 2rem;
  --font-size-large: 1.25rem;
  --font-size-small: 0.875rem;
  --font-size-xsmall: 0.75rem;
  --font-size-tiny: 0.625rem;
  --font-size-base--relative: 1em;
  --font-size-large--relative: 1.25em;
  --font-size-small--relative: 0.875em;
  --font-size-xsmall--relative: 0.75em;
  --font-size-tiny--relative: 0.625em;
  --font-size-h1: 2.625rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: var(--font-size-base);
  --font-size-h6: 0.875rem;
  --line-height-base: 1.428571429;
  --line-height-computed: calc(var(--font-size-base) * var(--line-height-base)));
  --headings-font-family: inherit;
  --headings-font-weight: 500;
  --headings-line-height: 1.1em;
  --headings-color: inherit;
  --padding-base-vertical: 6px;
  --padding-base-horizontal: 12px;
  --padding-large-vertical: 10px;
  --padding-large-horizontal: 16px;
  --padding-small-vertical: 5px;
  --padding-small-horizontal: 10px;
  --padding-xs-vertical: 1px;
  --padding-xs-horizontal: 5px;
  --line-height-large: 1.3333333;
  --line-height-small: 1.5;
  --component-offset-horizontal: 180px;
  --blockquote-color: var(--gray);
  --blockquote-font-size: 1.25em;
  --blockquote-border-color: var(---gray-light);
  --blockquote-small-color: var(--gray-light);
  --page-header-border-color: var(--gray-lighter);
  --hr-border: var(--gray-lighter);
  --preview-placeholder-text-color: color(var(--gray-light) a(50%));
}