/* =============================================
   Light page theme foundation
   Design tokens + base body treatment shared by
   about and service. Mirror of theme-dark.css
   with the same token names, light values.
   Not loaded by index or archive.
   ============================================= */

:root {
  --primary-color: hsl(0, 0%, 40%);
  --secondary-color: hsl(170, 44%, 35%);
  --background-color: hsl(0, 0%, 100%);
  --text-color: hsl(0, 0%, 12%);
  --text-muted-color: hsl(240, 5%, 40%);
  --text-year: hsla(0, 0%, 10%, 0.799);
  --text-darker-muted-color: hsl(240, 4%, 30%);
  --icon-color: hsl(240, 5%, 40%);
  --icon-active-color: hsl(240, 5%, 20%);
  --container-bg-alpha: hsla(240, 4%, 16%, 0.04);
  --container-bg-alpha-medium: hsla(240, 4%, 16%, 0.02);
  --container-bg-alpha-light: hsla(240, 5%, 26%, 0.06);
  --hover-bg-alpha: hsla(0, 0%, 0%, 0.03);
  --hover-bg-icon-alpha: hsla(0, 0%, 0%, 0.06);
  --border-color-alpha: hsla(0, 0%, 0%, 0.1);
  --border-radius-default: 8px;
  --border-radius-round: 50%;
  --border-radius-pill: 9999px;
}

html {
  scrollbar-gutter: stable;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
}

#main-content {
  flex-grow: 1;
  padding: 2rem 1.5rem;
}

@media (max-width: 760px) {
  #main-content {
    padding: 2rem 3rem;
  }
}

@media (min-width: 1024px) {
  #main-content {
    padding: 2rem 6rem;
  }
}