@layer core {
  /*=========================
     Table of Contents
  =========================*/
  /*
     1    CSS Base
     4    Reset
     15   Document
     50   Typography
     94   Links
     101  Lists
     109  Media
     123  Forms
     148  Tables
     155  Accessibility
     166  Containers
  */

  /*=========================
   CSS Base
=========================*/
  /*=========================
   Reset
=========================*/
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  /*=========================
   Document
=========================*/
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
  }
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: var(--radius-full);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-100);
  }
  body {
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--body);
    font-weight: var(--font-regular);
    line-height: var(--body-line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /*=========================
   Typography
=========================*/
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--foreground);
    font-family: var(--font-brand);
    font-weight: var(--font-semibold);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-tracking);
  }
  h1 {
    font-size: var(--h1);
  }
  h2 {
    font-size: var(--h2);
  }
  h3 {
    font-size: var(--h3);
  }
  h4 {
    font-size: var(--h4);
  }
  h5 {
    font-size: var(--h5);
  }
  h6 {
    font-size: var(--h6);
  }
  p {
    color: var(--text-muted);
    line-height: var(--body-line-height);
  }
  small {
    color: var(--text-muted);
    font-size: var(--caption);
  }
  strong {
    font-weight: var(--font-semibold);
  }
  /*=========================
   Links
=========================*/
  a {
    color: inherit;
    text-decoration: none;
  }
  /*=========================
   Lists
=========================*/
  ul,
  ol {
    padding: 0;
    list-style: none;
  }
  /*=========================
   Media
=========================*/
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  img {
    object-fit: cover;
  }
  /*=========================
   Forms
=========================*/
  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  button {
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  input,
  textarea,
  select {
    background: var(--surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-input);
  }
  textarea {
    resize: vertical;
  }
  /*=========================
   Tables
=========================*/
  table {
    width: 100%;
    border-collapse: collapse;
  }
  /*=========================
   Accessibility
=========================*/
  :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
  ::selection {
    background: var(--primary-100);
    color: var(--white);
  }
  /*=========================
   Containers
=========================*/
  .container {
    width: min(100% - (var(--page-padding) * 2), var(--container-page));
    margin-inline: auto;
  }
}