@use "vuepress-shared/styles/normalize";
@use "@sass-palette/hope-config";
@use "fonts/crimson.css";

html,
body {
  background: var(--bg-color);
  transition: background var(--color-transition);
}

:root {
  color-scheme: light;
}

#{hope-config.$dark-selector} {
  color-scheme: dark;
}

body {
  color: var(--text-color);
  font-family: var(--font-family);

  @media (min-width: hope-config.$pc) {
    font-size: 17px;
  }
}

a {
  color: var(--theme-color);
}

kbd {
  border-color: var(--border-color-dark);
  background: var(--bg-color-secondary);
  font-family: var(--font-family-mono);
}

code {
  font-family: var(--font-family-mono);
  transition: background var(--color-transition), color var(--color-transition);

  #{hope-config.$dark-selector} & {
    background: #333;
  }

  p a & {
    color: var(--theme-color);
  }
}

blockquote {
  border-color: #eee;
  color: #666;
  transition: border-color var(--color-transition),
    color var(--color-transition);

  #{hope-config.$dark-selector} & {
    border-color: #333;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
}

h1 {
  // narrow mobile
  @media (max-width: hope-config.$mobile) {
    font-size: 1.9rem;
  }
}

h2 {
  border-color: var(--border-color);
  transition: border-bottom-color var(--color-transition);
}

hr {
  border-color: var(--border-color);
  transition: border-top-color var(--color-transition);
}

tr {
  &:nth-child(2n) {
    background: var(--bg-color-secondary);
  }
}

th,
td {
  border-color: var(--border-color-dark);
}

@media print {
  @page {
    --text-color: #000 !important;
    --bg-color: #fff !important;
  }

  // ensure line numbers and ext hint are placed at right place
  div[class*="language-"] {
    position: relative !important;
  }
}