discourse/app/assets/stylesheets/common/foundation/base.scss

// These CSS custom properties are added here instead of in variables.scss
// because variables.scss is injected into every theme CSS file
// which causes problems when overriding custom properties in themes
:root {
  --topic-body-width: #{$topic-body-width};
  --topic-body-width-padding: #{$topic-body-width-padding};
  --topic-avatar-width: #{$topic-avatar-width};
  --d-border-radius: 4px;
  --d-border-radius-large: calc(var(--d-border-radius) * 2);
  --d-nav-pill-border-radius: var(--d-border-radius);
  --d-input-border-radius: var(--d-border-radius);
  --d-content-background: initial;
  --space-0: 0.125rem; // 2px
  --space-1: 0.25rem; // 4px
  --space-2: calc(0.25rem * 2);
  --space-3: calc(0.25rem * 3);
  --space-4: calc(0.25rem * 4);
  --space-5: calc(0.25rem * 5);
  --space-6: calc(0.25rem * 6);
}

// --------------------------------------------------
// Base styles for HTML elements
// --------------------------------------------------
html {
  color: var(--primary);
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  line-height: var(--line-height-large);
  background-color: var(--secondary);
  overflow-y: scroll;
  direction: ltr;

  &.text-size-smallest {
    font-size: var(--base-font-size-smallest);
  }

  &.text-size-smaller {
    font-size: var(--base-font-size-smaller);
  }

  &.text-size-larger {
    font-size: var(--base-font-size-larger);
  }

  &.text-size-largest {
    font-size: var(--base-font-size-largest);
  }
}

// Links
// --------------------------------------------------
a {
  color: var(--tertiary);
  text-decoration: none;
  cursor: pointer;

  &:visited {
    color: var(--tertiary);
  }

  &:hover {
    color: var(--tertiary);
  }

  &:active {
    color: var(--tertiary);
  }
}

// Typography
// --------------------------------------------------
hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  border: 0;
  border-top: 1px solid var(--primary-low);
  padding: 0;
}

// Lists
// --------------------------------------------------
ul,
ol,
dd {
  margin: 1em 0 1em 1.25em;
  padding: 0;
}

.cooked ul,
.cooked ol,
.cooked dd {
  clear: both;
}

.cooked,
.d-editor-preview {
  ul,
  ol {
    padding-inline-start: 1.25em;
  }
}

li,
.cooked li,
.d-editor-preview li {
  > ul,
  > ol {
    margin: 0;
  }
}

// Embedded content
// --------------------------------------------------
img {
  vertical-align: middle;
}

.svg-icon {
  color: inherit;
}

// Forms
// --------------------------------------------------
fieldset {
  margin: 0;
  border: 0;
  padding: 0;
}

pre code {
  overflow: auto;
  tab-size: 4;

  &.lang-markdown {
    white-space: pre-wrap;
  }
}

// Tables
// --------------------------------------------------
table {
  border-collapse: collapse;
}

tbody {
  border-top: 3px solid var(--primary-low);
}

.topic-list-item,
tr {
  border-bottom: 1px solid var(--primary-low);

  @media (prefers-reduced-motion: no-preference) {
    &.highlighted {
      animation: background-fade-highlight 2.5s ease-out;
    }
  }
}

// https://en.wikipedia.org/wiki/Ruby_character
ruby > rt {
  font-size: 72%; // ~10px with 14px base
}

// Buttons (was in normalized)
// --------------------------------------------------
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
}

// Inline form
// --------------------------------------------------
.inline-form {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;

  &.full-width {
    display: flex;
  }

  > input[type="text"],
  > input[type="search"],
  > input[type="password"] {
    display: inline-flex;
    flex: 1;
  }

  > .select-kit,
  > input[type="text"],
  > input[type="search"],
  > input[type="password"],
  > label,
  > .btn,
  > .d-date-input {
    margin-bottom: 0.5em; // for when items wrap (mobile, narrow windows)
    margin-right: 0.5em;

    &:last-child {
      margin-right: 0;
    }
  }
}

// Inputs
// --------------------------------------------------
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--tertiary);
}

textarea,
input,
select,
button {
  font-variation-settings: inherit;
  font-feature-settings: inherit;
}